8. CSS first steps:
Block-level elements
Line wide elements
Can contain text, data, inline elements, or other block-
level elements
Begin new line of text
<div>, <p>, <ul>, <li>, <h#>, <form>,
<fieldset>, etc
Guilherme
Cavalcanti
9. CSS first steps:
Line-level elements
Only contain text, data or other inline elements. They are
usually "smaller" than block-level elements.
Does not begin new line
<span>, <em>, <strong>, etc
Guilherme
Cavalcanti
10. CSS first steps:
Float
Floated elements remain a part of the flow of the web
page.
float: left | right | none;
Guilherme
Cavalcanti
11. CSS first steps:
How will they float?
If the floated element does not have a pre-
defined width, it will take up as much
horizontal space as required and available,
regardless of the float.
Guilherme
Cavalcanti
12. CSS first steps:
How will they float?
If the container element is the HTML <body>,
the floated div will sit on the left margin of the
page.
Guilherme
Cavalcanti
13. CSS first steps:
How will they float?
If the container element is itself contained by
something else, the floated div will sit on the
left margin of the container.
Guilherme
Cavalcanti
14. CSS first steps:
How will they float?
Floated elements will sit next to each other if
there is room in the container.
Guilherme
Cavalcanti
15. CSS first steps:
References
Understanding Floats
Understanding CSS Float
All About Floats
MDC
Guilherme
Cavalcanti
