| View Source (use the "Back-button" in your browser to go back)
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.
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".