Aligning Aside & Section Problems
Question
Why are my aside tags are at the bottom of the page they wont come up next to the section why is this? I want 3 columns next to each other.
* { 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>
1 answers
solution1
0 ACCPTED 2015-07-01 18:30:38
Floats only affect the content that follows the floating elements. So in your case, since the asides are floating at the end, they won't affect your section . Instead, you will have to reorder them, so the floating elements are first:
<div id="main_body">
<aside id="aside_left"></aside>
<aside id="aside_right"></aside>
<!-- section after the floating elements -->
<section id="section"></section>
</div>
Btw. the next time you post such a question, you should trim out all the content that makes it hard to figure out your structure. Instead of putting actual content inside the boxes, you can just give them fixed sizes (and maybe some background color so we know which box is what).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Positioning section and aside
Menus not aligning in Center and aside overlapping
Customized Layout with Usage of Section and Aside
HTML / CSS: Section + Aside Issue
Section inline with styled aside element?
Set section and aside to expand automatically with main tag
How to make the section and aside touch the footer?
My aside is not going to the right side of the section
Shall I use <section> tags inside <aside>?
Having trouble aligning <aside> to the left of <article> using float
Related Tags