Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Static layouts with css

1,925 views

Published on

Published in: Technology, Design
  • Login to see the comments

  • Be the first to like this

Static layouts with css

  1. 1. Static layouts with CSSHow to layout webpages using the display, float, clear, and properties
  2. 2. CSS layout basics, in 10 slides
  3. 3. CSS layout basics, in 10 slides
  4. 4. display: inline• Used mostly for text, which “fills up” its container• Inline element types include span, a, strong, em, and (confusingly) img• New elements go on the same line, immediately after the previous one
  5. 5. Inline span elements<span class="first">Lorem ipsum dolor ...</span><span class="second">Ut enim ad minim veniam, ...</span>
  6. 6. display: block• Structural elements that allow you to set width/height, margins, padding and borders• Block element types include div, p, form, h1, h2, h3, etc.• New elements stack vertically
  7. 7. Block div elements<div class="first">Lorem ipsum dolor ...</div><div class="second">Ut enim ad minim veniam, ...</div>
  8. 8. CSS Box Model Block only • width, height • padding • Inline + block border • marginDiagram by Rich Hauck
  9. 9. float: left, float: right• Floating causes block elements to stack horizontally• Elements keep stacking until the container width is filled• Additional elements are added below, much like inline content does
  10. 10. Floated divs<div class="float">Lorem ipsum dolor sit amet</div><div class="float">consectetur adipisicing elit,</div><div class="float">sed do eiusmod tempor incididunt</div><div class="float">ut labore et dolore magna aliqua.</div><div class="last float">Ut enim ad minim veniam</div>
  11. 11. clear: both• Clearing your floats is necessary to resume vertical stacking• It also has the effect of giving the parent a height & width• You can assign “clear: left” and “clear: right,” but sticking to “clear: both” is simpler
  12. 12. Clearing the floats<div class="float">Lorem ipsum dolor sit amet</div><div class="float">consectetur adipisicing elit,</div><div class="float">sed do eiusmod tempor incididunt</div><div class="float">ut labore et dolore magna aliqua.</div><div class="last float">Ut enim ad minim veniam</div><br class="clear" />
  13. 13. Floating left and right Note that b comes “before” a with float: right<div class="left">&larr; left a</div><div class="left">&larr; left b</div><div class="right">right a &rarr;</div><div class="right">right b &rarr;</div><br class="clear" />

×