Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header id="banner">
 <h1>CSS Layout Practice</h1>
 <nav>
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Resources</a></li>
  </ul>
 </nav>

</header>
<main id="content">
 <article>
  <h2>All About Floats</h2>

  <h3>What is "Float"?</h3>

  <figure class="canoe">
   <img src="https://unsplash.it/300/200?image=1011" alt="Floating in a canoe" />
   <figcaption>Word-Wrap is when text flows around something</figcaption>
  </figure>
  <p><strong>Float</strong> is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately
   called "text wrap".</p>

  <p>In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Floated elements <em>remain a part of the flow of the web page</em>. </p>

  <p>There are four valid values for the float property. <strong>Left</strong> and <strong>Right</strong> float elements those directions respectively. <strong>None</strong> (the default) ensures the element will not float and <strong>Inherit</strong> which
   will assume the float value from that elements parent element.</p>

  <h3>What are floats used for?</h3>

  <p>Aside from the simple example of wrapping text around images, floats can be used to create <strong>entire web layouts</strong>.</p>
  <p>Floats are also helpful for layout in smaller instances, like galleries, pullquotes, menus and more.</p>

  <div class="gallery">
   <figure class="gallery-item">
    <img src="https://unsplash.it/150/150?image=951">
    <figcaption>Boxy Image Grid</figcaption>
   </figure>
   <figure class="gallery-item">
    <img src="https://unsplash.it/150/150?image=946">
    <figcaption>Grid based content</figcaption>
   </figure>
   <figure class="gallery-item">
    <img src="https://unsplash.it/150/150?image=958">
    <figcaption>Complex Grid</figcaption>
   </figure>
   <figure class="gallery-item">
    <img src="https://unsplash.it/150/150?image=935">
    <figcaption>Floated design elements</figcaption>
   </figure>
  </div>

  <h3>Clearing the Float</h3>

  <img src="https://unsplash.it/150/150?image=1069" alt="Jellyfish float" class="jelly">
  <img src="https://unsplash.it/150/150?image=1041" alt="Rootbeer Float" class="wave">

  <p>Float's sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float. Again an illustration probably does more good than words do.</p>
  <p>In the example, the sidebar is floated to the left and is shorter than the main content area. The footer then is required to jump up into that available space as is required by the float. To fix this problem, the footer can be cleared to ensure it stays
   beneath both floated columns.</p>
  <p>Clear has four valid values as well. <strong>Both</strong> is most commonly used, which clears floats coming from either direction. <strong>Left</strong> and <strong>Right</strong> can be used to only clear the float from one direction respectively.
   <strong>None</strong> is the default, which is typically unnecessary unless removing a clear value from a cascade. <strong>Inherit</strong> would be the fifth, but is strangely not supported in Internet Explorer. Clearing only the left or right float,
   while less commonly seen in the wild, definitely has its uses.</p>


  <h3>The Great Collapse</h3>

  <p>One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to
   nothing. This isn't always obvious if the parent doesn't contain any visually noticeable background, but it is important to be aware of.</p>

  <p>Collapsing almost always needs to be dealt with to prevent strange layout and cross-browser problems. We fix it by clearing the float <strong>after</strong> the floated elements in the container but <strong>before</strong> the close of the container.</p>

  <p><strong>The Clearfix Trick</strong> uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it.</p>


 </article>

</main>
<aside id="sidebar">
 <section>
  <h3>Learn More</h3>
  <ul>
   <li><a href="https://css-tricks.com/all-about-floats/">CSS Tricks</a></li>
   <li><a href="http://www.w3schools.com/css/css_float.asp">W3C Float &amp; Clear</a></li>
   <li><a href="https://developers.google.com/chrome-developer-tools/">Chrome Inspector</a></li>
   <li><a href="http://getfirebug.com/">Firebug Extension</a></li>
   <li><a href="https://jigsaw.w3.org/css-validator/">CSS Validator</a></li>
  </ul>
 </section>
</aside>
<footer id="footer">
 <small>
			&copy; 2015 Platt College. Content adapted from"<a href="https://css-tricks.com/all-about-floats">All About Floats</a>" from CSS Tricks
		</small>
</footer>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console