Static layouts with CSSHow to layout webpages using the display, float,             clear, and properties
CSS layout basics, in 10 slides
CSS layout basics, in 10 slides
display: inline• Used mostly for text, which “fills up”  its container• Inline element types include span, a,  strong, em,...
Inline span elements<span class="first">Lorem ipsum dolor ...</span><span class="second">Ut enim ad minim veniam, ...</span>
display: block• Structural elements that allow you to  set width/height, margins, padding  and borders• Block element type...
Block div elements<div class="first">Lorem ipsum dolor ...</div><div class="second">Ut enim ad minim veniam, ...</div>
CSS Box Model                        Block only                                         •   width, height                 ...
float: left, float: right• Floating causes block elements to  stack horizontally• Elements keep stacking until the  contai...
Floated divs<div   class="float">Lorem ipsum dolor sit amet</div><div   class="float">consectetur adipisicing elit,</div><...
clear: both• Clearing your floats is necessary to  resume vertical stacking• It also has the effect of giving the  parent ...
Clearing the floats<div class="float">Lorem ipsum dolor sit amet</div><div class="float">consectetur adipisicing elit,</di...
Floating left and right          Note that b comes “before” a with float: right<div class="left">&larr;     left a</div><d...
Upcoming SlideShare
Loading in...5
×

Static layouts with css

1,647

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,647
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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" />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×