HTML Code Tutorial

CSS - Float Property

The float property is a very helpful tool for aligning divisions on a web page.

In the diagram shown below, we assign the name main to a division that we want to use for our web page heading using the id attribute.

We want to divide main into 2 columns. We'll place our company logo in the left column and a slogan in the right column.

float property

We place the HTMLcode shown below on our web page and look at it in our browser. They line up on the page below the main division as shown in the diagram.

How do we get them to line up in their proper positions within the main division?

First we size them properly and then we add the float property to our nested divisions on the style sheet.

HTML Code
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div> 

/* remove default padding and margins */
* {
padding: 0;
margin: 0
}

Set the dimensions for the main division. Center it on the web page.

 
#main {
width: 900px;
height: 100px;
/* center main division on web page */
margin-left: auto;
margin-right: auto;
}

Set the dimensions for the left division. Add float: left to assign it to the first available position in main.

 
#left {
width: 450px;
height: 100px;
float: left;
}

Set the dimensions for the right division. Add float: left to assign it to the next available position in main.

 
#right {
width: 450px;
height: 100px;
float: left;
}

Beginner Tips

Do not add borders, padding or margins to your nested divisions.

The width of your nested divisions must not exceed the width of the main division.

Beginners will run into problems getting adjacent horizontal divisions to line up side by side. See our Visual Diagrams explaining problem.

Other Uses

You can also position elements like header tags and paragraphs inside a division using the float property. See: How to Create web Page Headings.



Check out our Free Frames Template Kit or try our Free Frames Kit Demo