Layout with CSS using the Float Tag

Here is a simple example file positioned with the float and clear properties. The header is cleared on both sides, so that nothing can float up beside it. The menu is floated to the left, so that the remaining division floats up beside it.

I sometimes get unexpected results with IE6; as can be foreshadowed by experimenting with changing the height of the header, and the width of the menu.

<style type="text/css">
div.header{clear:both; text-align:center; height:50pt; 
         background-color:cyan; margin:0pt 0pt 0pt 0pt; 
         padding:10pt 10pt 10pt 10pt;}

div.menu  {width:100pt; float:left; 
         background-color:blue; margin:0pt 0pt 0pt 0pt; 
         padding:10pt 10pt 10pt 10pt;}

div.content{margin:0pt 0pt 0pt 0pt;
         padding:10pt 10pt 10pt 10pt;}
</style>

<body>
<div class="header">Header text   </div>
<div class="menu">  Menu text     </div>
<div class="content">Content text </div>
</body>

Some CSS Properties Useful for Layout with Float

Attribute Name	DOM Property Name	Values	Default Value	Remarks
float	float	left, right, none	none
clear	clear	left, right, both, none		clear:left => clear left side, etc.
height	height	length,%	auto	auto = calc'd by browser
width	width	length,%	auto	auto = calc'd by browser
overflow	overflow	scroll, visible, hidden, auto	visible
margin	margin	top,right,bottom,left given in length, %		values for top, right, bottom, left are in that order, with no commas.
padding	padding	top,right,bottom,left given in length,not %	none	space between text and border of element-- values for top, right, bottom, left are in that order with no commas.

length means px, pt, cm, etc.