CSS - Float Property
The float property is a very helpful tool for aligning divisions on a web page.
In the diagram shown below, we customize 3 divisions using the class method and call one main which is our container.
We want to divide main into 2 columns. We'll place our content in the left column and a navigation device in the right column.
We place the HTML code 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.
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
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 all 3 divisions on the style sheet.
Important: The combined width of the two nested divisions must not exceed the width of the main division or 100% of available space!!
Anything you add in the way of borders, padding or margins adds to width.
*We use container divisions in our explanations because it makes the concept a bit easier to explain to beginners. Containers are optional and are a matter of the taste of the designer.
The float property is added to the main division so that it will expand with the height of the longest nested column(division).
HTML Code
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
CSS
/* remove default padding and margins */
* {
padding: 0 0 0 0;
margin: 0 0 0 0
}
/*Set the width for the main division */
div.main {
width: 100%;
float: left
}
/* Set the width for the left division.
Add float: left to assign it to the
next available position in main. */
div.left {
width: 80%;
float: left;
}
/* Set the width for the right division.
Add float: left to assign it to the
next available position in main. */
div.right {
width: 20%;
float: left;
}
Beginner Tips
The combined widths of your nested divisions must not exceed 100% of available space.
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 images and paragraphs inside a division using the float property.
Liquid Design
The sizing of divisions in liquid designs requires the use of relative values or percentages.
The same rules apply for summing the nested divisions within a container division. If the width of the container is 100%, the combined values of nested division width, margins and padding, must not exceed 100%.
HTML Code No Container
<div class="left"></div>
<div class="right"></div>
CSS
/* remove default padding and margins */
* {
padding: 0 0 0 0;
margin: 0 0 0 0
}
/* Set the width for the left division.
Add float: left */
div.left {
width: 72%;
margin: 4%;
float: left;
}
/* Set the width for the right division.
Add float: left */
div.right {
width: 16%;
margin: 2%;
float: left;
}
Sum the values: 72 + 4 + 4 + 16 + 2 +2 =100%
Liquid vs Responsive Web Design
Test both Demos. Sqeeze left as far as you can to see the difference between liquid and responsive pages.
Visit a Demo of Liquid Design
Visit a Demo of Responsive Web Design