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">← left a</div>
<div class="left">← left b</div>
<div class="right">right a →</div>
<div class="right">right b →</div>
<br class="clear" />
