Home » CSS Tutorial

02. Creating a complete HTML Layout Page without tables using CSS Styles - Clear and Float property

The following page gives the complete HTML layout:
<html>

<head>

<title>CSS Tutorial: Designing without tables.</title>
<style>

div.Header
{
width:800px;
border: 1px solid #999;
margin: 4px;
padding: 4px
}

div.Container
{
width:800px;
border: 1px solid #999;

}

div.Menu
{
width:182px;
float:left;
border: 1px solid #999;
padding: 4px;
margin: 4px
}

Div.Content
{
width:582px;
float:right;
border: 1px solid #999;
padding: 4px;
margin: 4px
}

Div.Footer
{
width:800px;
border: 1px solid #999;
clear:both;
margin: 4px;
padding: 4px
}

BODY
{
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif
}

</style>
</head>

<body>

<center>

<div class="Header">

<h1>CSS Tutorial</h1>

Sample Header.
</div>

<div class="Container">
<div class="Menu">

<h2>Main Menu </h2>
<a href="#">Menu Item 1</a><br>

<a href="#">Menu Item 2</a><br>

</div>

<div class="Content">
Main Body.

</div>

</div>

<div class="Footer">
footer
</div>

</center>

</body>

</html>
The output of the above code is:

css_layoutMost 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.

 

css_html_layout

 

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.