This is a continuation of the CSS Layout Series. You can read first article Create Browser Compatible CSS Layout . In this article we will over Float based layout in CSS. There are a few different ways of doing CSS-based layout, including absolute positioning and using negative margins. In my opinion float-based layouts is the easiest technique to use. In a float-based layout you simply set the width of the elements you want to position, and then float them left or right. Unfortunately there is no float center or middle which could have made it even easier. But there are ways around this problem.
One key concepts that you need to be mindful of in order to avoid un-necessary frustrations is that floated elements does not take any space in the flow of the document.ng block boxes. To avoid this problem you will need to clear the floats as necessary. Instead of floating and clearing elements frequently, it is better to float everything closely, and then clear at strategic points as necessary throughout the document.
Creating Two-column floated layout
To create a simple two-column layout using floats we will start off with a basic XHTML framework. In this example the XHTML consists of header, content, menu, and footer container. All containers will be placed inside the wrapper div which will be main container to hold all contents. Our desired layout is depicted below
<div id="wrapper">
<div id="header">
.....Header content
</div>
<div id="content">
....Main Contents
</div>
<div id="Menu">
Menu Items
</div>
<div id="footer">
.... Footer Items
</div>
</div>
You may ask why I chose to put the Main Contents first and then menu and not vice versa. That’s a great question. The reason we chose to do the layout in CSS and table less web page is because we wanted our website to be search engine friendly. Search Engine’s are constantly changing their algorithm and crawling methods so I may be wrong this now but as far as I know many Search Engines will crawl thru first 200 words of a webpage to get the idea what your webpage is about, and then it may or may not read thru the whole page. You should definitely want them to ready thru your main contents. If you have medium to large size site structure your menu may be over 200 words. It is also good practice for accessibility reason. I have seen most developers choose to float left-column à and then the right-column or in our case the main content column. In my opinion that is a mistake.
I have also seen many developers they choose to keep their contents too close. In some buggy browsers you may see some unwanted results. Always keep some spacing between containers. Remember no browsers are bug free and especially IE does not follow standards very well. In most browsers if the content of an element gets too large, it will simply overflow.
To prevent this from happening make sure you create spacing between columns. The CSS for achieving this layout you can simply set the desired width of each column and then float the containers left and right as shown below:
#content {
width: 600px;
float: right;
}
#menu {
width: 180px;
float: left;
}
If you add the width’s of the each container 600 + 180 = 780px. Our wrapper is 800px so we kept 20px free incase of a buggy browser. After these two containers we have the footer. This is where we need to use the clear as show below:
#footer {
clear: both;
}
Now let’s create the spacing by adding the horizontal padding to the menu container this will get rid of IE 5 bug. You may ask why not put the padding on the element directly. That should work fine on the new browsers but will not work with IE 5:
#menu {
padding-top: 15px;
padding-bottom: 15px;
}
#menu li {
padding-left: 15px;
padding-right: 15px;
}
We will do the same for the right side of the content area:
#content h1, h2, p {
padding-right: 15px;
}
Our two column layout is now complete. If any you find a bug in this article please post the problem in the forum. I will be happy to answer any questions you may have. In next article we will build on this concept and create a three column layout.
|