2
Почему мои отложенные теги находятся в нижней части страницы, они не подходят к разделу, почему это так? Я хочу 3 столбца рядом друг с другом.Выравнивание вопросов и разделов
* {
margin: 0px;
padding: 0px;
font-family: 'Source Sans Pro', sans-serif;
}
#header {
width: 100%;
height: 200px;
background-color: lightgray;
}
#header h1 {
font-size: 67px;
text-align: center;
padding-top: 50px;
}
#main_body {
width: 90%;
height: auto;;
margin-left: auto;
margin-right: auto;
}
#section {
width: 60%;
height: auto;
margin-left: auto;
margin-right: auto;
border: 3px solid black;
}
#aside_right {
width: 10%;
height: auto;
float: left;
border: 3px solid black;
}
#aside_left {
width: 10%;
height: auto;
float: right;
border: 3px solid black;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Clean Template</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header id="header">
<h1>Clean Template</h1>
</header>
<nav id="nav">
<ul class="menu">
<li class="selected"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Main Body Beginning -->
<div id="main_body">
<section id="section">
<article class="article_1">
<hgroup class="article_hgroup">
<h1>Article Title</h1>
<h2>Article Subtitle</h2>
</hgroup>
<p class="article_p">
Aut aute deserunt admodum, irure cernantur comprehenderit qui vidisse cillum
elit doctrina quem de velit litteris in consectetur. Cernantur sint aliqua
deserunt varias ubi veniam tempor distinguantur. Occaecat do occaecat ad elit
vidisse de occaecat. Aut fugiat sempiternum, ut tamen veniam sint senserit de
laboris ita commodo, a eram admodum ad nam de praesentibus, quo aut cillum amet
minim, summis eiusmod e enim fugiat, culpa nescius familiaritatem. Si o
transferrem, consequat e voluptate ea consequat legam tempor id qui dolor in
labore, nostrud an minim consequat, senserit labore legam cupidatat lorem, quis
iis ad aliqua tempor in de esse occaecat. Legam quibusdam ubi quem elit, ex
consequat non doctrina e si noster proident an qui aute dolor hic excepteur.
</p>
<footer class="article_footer">
<h3>Written by: John Doe | July 1st, 2015</h3>
</footer>
</article>
<article class="article_2">
<hgroup class="article_hgroup">
<h1>Article Title 2</h1>
<h2>Article Subtitle 2</h2>
</hgroup>
<p class="article_p">
Aut aute deserunt admodum, irure cernantur comprehenderit qui vidisse cillum
elit doctrina quem de velit litteris in consectetur. Cernantur sint aliqua
deserunt varias ubi veniam tempor distinguantur. Occaecat do occaecat ad elit
vidisse de occaecat. Aut fugiat sempiternum, ut tamen veniam sint senserit de
laboris ita commodo, a eram admodum ad nam de praesentibus, quo aut cillum amet
minim, summis eiusmod e enim fugiat, culpa nescius familiaritatem. Si o
transferrem, consequat e voluptate ea consequat legam tempor id qui dolor in
labore, nostrud an minim consequat, senserit labore legam cupidatat lorem, quis
iis ad aliqua tempor in de esse occaecat. Legam quibusdam ubi quem elit, ex
consequat non doctrina e si noster proident an qui aute dolor hic excepteur.
</p>
<footer class="article_footer">
<h3>Written by: John Doe | July 1st, 2015</h3>
</footer>
</article>
<article class="article_3">
<hgroup class="article_hgroup">
<h1>Article Title 3</h1>
<h2>Article Subtitle 3</h2>
</hgroup>
<p class="article_p">
Aut aute deserunt admodum, irure cernantur comprehenderit qui vidisse cillum
elit doctrina quem de velit litteris in consectetur. Cernantur sint aliqua
deserunt varias ubi veniam tempor distinguantur. Occaecat do occaecat ad elit
vidisse de occaecat. Aut fugiat sempiternum, ut tamen veniam sint senserit de
laboris ita commodo, a eram admodum ad nam de praesentibus, quo aut cillum amet
minim, summis eiusmod e enim fugiat, culpa nescius familiaritatem. Si o
transferrem, consequat e voluptate ea consequat legam tempor id qui dolor in
labore, nostrud an minim consequat, senserit labore legam cupidatat lorem, quis
iis ad aliqua tempor in de esse occaecat. Legam quibusdam ubi quem elit, ex
consequat non doctrina e si noster proident an qui aute dolor hic excepteur.
</p>
<footer class="article_footer">
<h3>Written by: John Doe | July 1st, 2015</h3>
</footer>
</article>
</section>
<aside id="aside_left">
<article class="article_aside_1">
<h1>Article Header</h1>
<p>
Ut ne eram vidisse, noster se quibusdam non quae. Se admodum voluptatibus. Nulla
ullamco tractavissent, possumus aliqua ex aliquip efflorescere te cupidatat
tamen minim in labore ea hic possumus cohaerescant.
</p>
<footer class="article_aside_footer">
<h3><a href="#">Full Post</a></h3>
</footer>
</article>
<article class="article_aside_2">
<h1>Article Header 2</h1>
<p>
Ut ne eram vidisse, noster se quibusdam non quae. Se admodum voluptatibus. Nulla
ullamco tractavissent, possumus aliqua ex aliquip efflorescere te cupidatat
tamen minim in labore ea hic possumus cohaerescant.
</p>
<footer class="article_aside_footer">
<h3><a href="#">Full Post</a></h3>
</footer>
</article>
<article class="article_aside_3">
<h1>Article Header 3</h1>
<p>
Ut ne eram vidisse, noster se quibusdam non quae. Se admodum voluptatibus. Nulla
ullamco tractavissent, possumus aliqua ex aliquip efflorescere te cupidatat
tamen minim in labore ea hic possumus cohaerescant.
</p>
<footer class="article_aside_footer">
<h3><a href="#">Full Post</a></h3>
</footer>
</article>
</aside>
<aside id="aside_right">
<article class="article_aside_1">
<h1>Article Header</h1>
<p>
Ut ne eram vidisse, noster se quibusdam non quae. Se admodum voluptatibus. Nulla
ullamco tractavissent, possumus aliqua ex aliquip efflorescere te cupidatat
tamen minim in labore ea hic possumus cohaerescant.
</p>
<footer class="article_aside_footer">
<h3><a href="#">Full Post</a></h3>
</footer>
</article>
<article class="article_aside_2">
<h1>Article Header 2</h1>
<p>
Ut ne eram vidisse, noster se quibusdam non quae. Se admodum voluptatibus. Nulla
ullamco tractavissent, possumus aliqua ex aliquip efflorescere te cupidatat
tamen minim in labore ea hic possumus cohaerescant.
</p>
<footer class="article_aside_footer">
<h3><a href="#">Full Post</a></h3>
</footer>
</article>
<article class="article_aside_3">
<h1>Article Header 3</h1>
<p>
Ut ne eram vidisse, noster se quibusdam non quae. Se admodum voluptatibus. Nulla
ullamco tractavissent, possumus aliqua ex aliquip efflorescere te cupidatat
tamen minim in labore ea hic possumus cohaerescant.
</p>
<footer class="article_aside_footer">
<h3><a href="#">Full Post</a></h3>
</footer>
</article>
</aside>
</div>
<!-- Main Body Ending -->
<footer id="footer">
© All Rights Reserved. | <a href="#">Legal</a>
</footer>
</body>
</html>
Пожалуйста, разместите внешнюю ссылку JSFiddle, чтобы мы могли легко ее модифицировать. – Wazaaaap
@wazaaaap Но ... есть кнопка «Копировать фрагмент, чтобы ответить». –
@Basic: Почему вы ожидаете, что они будут где угодно, но внизу? Вот где вы помещаете их в свой HTML. – Siguza