Lesson 5A: Positioning Content

In this lesson, we will learn how to position content on a page. 

Positioning Content on a Page

Floating Elements

See the Pen yuihg by Michael Macfadden (@mmacfadden) on CodePen.

Clearing Floats

<header>
  <code><header></code>
</header>
<section>
  <code><section> <br> float: left;</code>
</section>
<aside>
  <code><aside> <br> float: right;</code>
</aside>
<footer>
  <code><footer></code>
</footer>

See the Pen Layout without Cleared or Contained Floats by Michael Macfadden (@mmacfadden) on CodePen.

Inline-Block Positioning

<div id="wrapper">
  <header>
    <code><header></code>
  </header>
  <section>
    <code><section> <br> display: <br> inline-block;</code>
  </section>
  <section>
    <code><section> <br> display: <br> inline-block;</code>
  </section>
   <section>
    <code><section> <br> display: <br> inline-block;</code>
  </section>
  <footer>
    <code><footer></code>
  </footer>
</div>

See the Pen Inline-Block Elements with White Space by Michael Macfadden (@mmacfadden) on CodePen.

Fixed Positioning

<div class="container wrapper_1">
  <section></section>
</div>
<div class="container wrapper_2"></div>
<div class="container wrapper_1"></div>
<div class="container wrapper_2"></div>
<div class="container wrapper_1"></div>
<div class="container wrapper_2"></div>
<div class="container wrapper_1"></div>

See the Pen jacdz by Michael Macfadden (@mmacfadden) on CodePen.


*header image from Quin Dombrowski via flickr: https://flic.kr/p/93HP2z