student student - 4 years ago 127
HTML Question

Confusion - where is the sidebar?


How can you fix sidebar issue here:
http://codepen.io/chriscoyier/pen/ClGcF




body {
padding: 30px;
}
header {
background: lightblue;
}
section {
background: lightgreen;
width: 75%;
float: left;
}
article {
background: white;
margin: 0 0 1rem 0;
}
aside {
background: pink;
width: 25%;
float: right;
}
header, article, section, .module {
padding: 1rem;
}

<main>
<header>
<h1>Site</h1>
</header>
<section>
<article>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo molestias ex officia eligendi reiciendis fuga magnam? Ullam ut ab doloremque accusamus iusto aliquam facilis sapiente!</p>
</article>
<article>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo molestias ex officia eligendi reiciendis fuga magnam? Ullam ut ab doloremque accusamus iusto aliquam facilis sapiente!</p>
</article>
</section>
<aside>
<div class="module">
<h3>Module</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio rem ab delectus fugit repellendus perspiciatis dolor consequuntur tenetur voluptatem a vitae odit aspernatur? Voluptas quisquam corporis nostrum aspernatur aliquid harum saepe ab pariatur veniam iste ipsam alias nemo voluptatibus doloribus.</p>
</div>
</aside>
</main>





The goal is to have the sidebar move back to the top.

My confusion:

Where is the sidebar there inside the pen?

Answer Source

<aside> is the sidebar part.

In your css:

*,*:after,*:before { box-sizing: border-box; }

You can read about box-sizing following this link: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download