Intro to Web Development with HTML/CSS

04: Advanced CSS, Part I

Flow and Float
UReddit
March 3, 2012

Contents
1 Introducton

that any following content or elements is placed on

a new line below the block level element in question.
This default behavior is termed normal flow.

2 Positioning
2.1 Normal Flow
2.2 Out of flow .
2.2.1 Float .
2.2.2 Clear

1
. . . . . . . . . . . . . .
1 2.2 Out of flow
. . . . . . . . . . . . . .
1
. . . . . . . . . . . . . .
1 In normal flow, the position of an element is based on
. . . . . . . . . . . . . .
2 the elements defined before it in the HTML code. In
order to achieve positioning that is not in accord with
the normal flow (such as creating two divs and forcing
them to display side-by-side as columns rather than
1 Introducton
the second being below the first), we must break out
In the previous few documents, I have introduced of flow. This can be done through the use of CSS
HTML and CSS. In the previous document, CSS was float and position.
detailed as a tool to complement HTML in giving
HTML elements widths or heights, defining text colors and sizes, and so on. In other words, it was show- 2.2.1 Float
cased to be second place to HTML, so to speak. An HTML element can be assigned the CSS attribute
This was because I wanted to introduce the basic con- float, which has possible values of none (the decept of associating CSS rules with HTML elements, fault value), left, or right. (It can also be assigned
to show how they can work together.
inherit, but I have personally not found use for this
However, CSS has the ability to do much more than value.) If an element is floated left, its outer left
what was shown in the previous document. The topic edge (meaning that margin is accounted for) aligns
of this document is CSS positioning. This topic is with the left inner edge (meaning that padding is
complex enough to deserve individual attention. Be- accounted for) of its container, and analogously for
fore discussing the specific methods to position ele- float: right. The interesting aspect is that conments using CSS, however, we must be introduced to tent following a floated element is allowed to be posithe concept of flow.
tioned along the other side of that element, meaning
that an image (<img>) that is floated to the left that
is followed by text (in the code) will display with the
2 Positioning
image flush to the left of the containing element with
the text to the right of the image, instead of below it
2.1 Normal Flow
as would normally happen with a block type element.
Recall the distinction between block and inline el- It will also be displayed as high as possible within its
ements. Block type elements, such as <div>, are parent element.
placed on their own line within their containing elHere is an example of a div floated to the left, folement and, by default, are followed by a new line, so lowed in the HTML code by text:
1

and then to the right of the floated element, rather

than below the floated element. This behavior is often undesirable and can be prevented using clear.
2.2.2

Clear

The clear attribute can have values left, right,

both, none (the default), and, like most attributes,
inherit. Very simply, assigning clear: left; to
an element forces it to never be placed in such a way
that there is a floated element to its left. clear:
right; is analogous, and clear: both; prevents it
from having a floated element to either side.
This gives us a way to force an element to stretch
to accomodate its floated contents:
Accordingly, a simple page consisting of two
columns side by side could be accomplished as fol- <div id="parent">
<div style="float: left; height: 200px;">
lows:
[some content]
<div style="float: left; width: 50%;">
</div>
[some content]
<div id="cleared" style="clear: both"></div>
</div>
</div>
<div id="next">
<div style="float: right; width: 50%;">
[more content]
[more content]
</div>
</div>
Since #cleared cannot be to the side of a floated
Note that since a floated element is out of normal element, it will be placed below the floated element;
flow, if a parent element contains only a floated ele- furthermore, since it is in normal flow, #parent will
ment, the floated element will not cause its parent el- stretch accordingly, and #next will be entirely below
ements height to stretch; the parent elements height the now taller #parent instead of to the right of the
will remain at zero. Since this parent element is in floated div.
normal flow, another element after the parent element
will be placed below the parent element, which has
Conclusion
height zero, and will then accomodate for the floated 3
element. An example:
The rules which float follows are fairly straightforward to articulate. However, it is important to ex<div id="parent">
<div style="float: left; height: 200px;"> periment with it in order to establish some intuition
as to how it behaves with respect to other elements.
[some content]
I recommend doing so; you do not need server access
</div>
as you can compose an HTML file on your computer
</div>
and then open it in your web browser of choice in
order to view it.
<div id="next">
The next document in this series will deal with the
[more content]
other
way to break out of normal flow, position.
</div>
(Recall that an element with an id is referred to in
CSS by # followed by the assigned id.) In the above
code, since #parent conains only a floated element,
which is out of normal flow, #parent has height zero,
rather than 200px to accomodate its contents. Therefore, #next will, in normal flow, be below #parent
2