Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
Using CSS Floats to Create A Website Layout
Introduction
In this tutorial I will cover one of the most basic and yet difficult to understand principles behind creating a website layout. The floated element. To hopefully get the concept across I will talk you through a 'two-column' website page layout with CSS floats. You will need to view >> source in your browser to view the code I have used and, in each case, the CSS is between the head tags of the page. As always, I would recommend a separate stylesheet for your real site.
What is a float?
Floats can come in three flavours with CSS; float left, float right and float none. The idea behind a float is that it takes a block website element (such as a div tag) and moves it to either the left or the right of a page based on what float style is applied. The floating of an element has two effects. Firstly, it will allow another element to move up alongside it to create columns. Secondly it will take the element out of the natural 'flow' of a website. NB: When viewing the demos for this tutorial bear in mind that I have kept the code as simple as possible to make it clearer to understand. However, I have added background colours to the elements to better demonstrate where they sit on the page and also a black border to the wrapper div to show how that reacts to floats as well.
Demo one: No floats
Click Here to open the first demo page (page opens in a new browser window). This first demo shows a two-column layout without any floats applied. It demonstrates what the natural 'flow' of block elements should be. You will see that the header and navigation (both the full width of the wrapper div) settle neatly below each other. This is also true of the left and right columns and the footer div. New venturers into website design often wonder why this happens to the left and right columns. I have given the left and right columns the correct widths to make up the 800px of the wrapper div minus the width of the padding applied either side as described in my CSS Box Model tutorial. So why won't they nestle up next to each other to create two columns? Well, It is because I haven't used floats to achieve this.
Demo two: With floats
Click Here to open the second demo page (page opens in a new browser window). This second demo has two extra rules applied to the CSS styles. I have used float: left; for the left column and float: right; for the right column. See how the right column now rests alongside the left column and up against the navigation bar. There is still one minor issue with our new two-column layout. The footer we created is not sitting below the left and right columns. This is because using the floats have taken them out of the natural 'flow' of the website. Imagine it like they have been lifted above the page, allowing the footer to slip up underneath. You should also notice that floating the columns has had the same effect on the wrapper div. Although (and this is complicated) the floated columns are still 'wrapped'. I.e. the columns float up against the wrapper div and not the edge of the browser window. Strange huh? But that is how it works.
Demo three: Clearing the floats
Click Here to open the third demo page (page opens in a new browser window). In order for the footer div to sit beneath the floated columns I have had to add one more rule. This time to my footer CSS style. The code I have used is clear: both; Basically I am telling the footer that it should clear both left and right floated elements. If I had only used left floats in my layout then I could have used clear: left; and if I'd only used right floats then clear: right; would have done the job as well. You will also pick up that the wrapper div now stretches all the way down as it should do.
Demo four: Clearing the floats with overflow hidden
Click Here to open the fourth demo page (page opens in a new browser window). If I were to remove the footer div, with it's float clearing properties, the result would be that the wrapper div would slide back up, underneath the floats, and nestle underneath the navigation bar. This is because the navigation bar is the last unfloated element. So, how do you overcome this if you don't have a footer in your design but you want the whole page wrapped? Here is a nifty trick. I have added two rules to the wrapper style. These are overflow: hidden; and a height of 1%. And, hey presto, the wrapper nicely surrounds the left and right floated columns.
Demo five: Floating images
Click Here to open the fifth demo page (page opens in a new browser window). One more thing I would like to cover off with CSS floats in web design is the ability to float page items and have text wrap nicely around them. In the fifth demo here I have included a rule that tells the browser to float all images to the right. You can see that the image of the tree is on the right and how the text 'wraps' the image. I have also given the image both left and bottom margins to give the text some 'breathing space'. This is a technique I use quite a bit in my designs as I think the result has a natural feel to it.
Conclusion
That is probably enough about floats to get you started on understanding how they can be used to lay out a web page. There is so much more that they can do and experimenting with floated elements can produce some amazing results. Do make sure that you always check across all browsers when using floats though as you may get some surprising and annoying results in IE6! I would also like to apologise for the lack of pictures in this tutorial but sometimes it is better just to show people what you mean.
