Back
| View Source (use the "Back-button" in your browser to go back)
Multiple floats
This is the first block-level element, flow is from top to bottom and elements are expanded over the complete width of
the webpage. This is normally used as a "header".
This is the second element which is floated to the left and still placed in the normal flow.
This is the third element which is floated to the right, using the left space by the second element.
This is the
fourth element which does not clear any space and "flows between" the second and third element.
We now (almost) have a three-column layout!
Almost because if we type to many text in this element it starts flowing underneath the left and right elements... :(
Clearing does not help because then this element would not flow between the left and right elements. We need someting different: a left-margin and a right-margin which are both a bit wider then the left and right elements.
Further: placing an image in the first element, a (for example javascript/jQuery) menu in this element, coloring, some other margins and some padding and
all this starts looking like a
real website, see
here.
To almost complete our three-column layout we put a fifth element here which is normally called a "footer".