<title>CSS Tutorial: Designing without tables.</title>
<h2>Main Menu </h2>
<a href=”#”>Menu Item 2</a><br>
Most of the design above is self-explainatory. The layout is table free and has header, footer, menu and the main content body.
Top Div contains header with width, border, margin and padding set. Middle Div contains 2 nested Div elements: one is the menu to the left and the other Div element is the content body that contains the content. Width of each Div element is set as per the requirement. Left Div has Float CSS property set to left and the right Div has float CSS property set to right.
Finally, the footer Div is equal in width to the header and has the footer content. Here, we can define each Div element in different colours and properties independent of the other.
Also, important point to note is that in the footer CSS Div element, Clear property is set to both. This ensures that footer is displayed only when the earlier Div elements: Menu and Content are displayed. Try removing this clear property and see what happens?????
The following output is seen which is not desired. Therefore, clear property is important.
Try replacing in the footer div element with: clear:left; and clear:right;
The footer element would be displayed below the left block and the right black in the 2 cases respectively.