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
Free Tools We Recommend
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.
Have you tried our Free Mobile Ready website template kit? Download Template #402 - 6 Page Kit