1. Static layouts with CSS
How to layout webpages using the display, float,
clear, and properties

2. CSS layout basics, in 10 slides

3. CSS layout basics, in 10 slides

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. Inline span elements
<span class="first">Lorem ipsum dolor ...</span>
<span class="second">Ut enim ad minim veniam, ...</span>

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. Block div elements
<div class="first">Lorem ipsum dolor ...</div>
<div class="second">Ut enim ad minim veniam, ...</div>

8. CSS Box Model
Block only
• width, height
• padding
•
Inline + block
border
• margin
Diagram by Rich Hauck

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. 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. 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. 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. 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" />