Centring Floated Divs With Clearing Divs   

When coding a website in CSS and XHTML many people like to have two columns. To get this you use the "float" attribute in your CSS. The can align one column to the left and the other to the right. What many people find troubling is having two floated columns in a centred holder. When coding a website you usually call this holder the "wrapper". Also when designing and coding a website you generally want to make the site centrally aligned. This is better for different screen resolutions. To do this we usually use the following CSS coding:

text-align:centre; - Placed in the CSS code for "body"

margin:0 auto; - Placed in the CSS code for "wrapper"

When using two column the wrapper must contain two floated divs. Since browsers interpret floats in different ways sometimes it is necessary to use a clearing div. When the wrapper is centred and the columns are floated a problem is presented to us in Firefox. The wrapper does not expand as the columns inside it do. The way we can get the wrapper to expand is to use a clearing div. A clearing div acts as a blank div placed just under the two columns to make the wrapper expand. This is a useful technique which does not involve browser hacks. To do a clearing div put the following in your CSS:

.clear { width: 100%;

height: 1px;

margin: 0 0 -1px;

clear: both; }

Now under the two columns or under a div which is not causing the wrapper to expand simple add the following code:

This is a useful and simple technique. It can be used for many different situations when coding a website.

Recent article: CSS Articles
CSS Content? Using tables within the content of your page is a major no-no, the whole intent and purpose of CSS is to control the style of your page elements, this is done using an external stylesheet.

An external Stylesheet? External stylesheets give you the control of your whole website from one single file rather than trying to edit your whole websites CSS using global search and replace or by opening each page individually.

If you are new to this HTML malarkey then welcome, you have just embarked upon a new learning curve that does not take too long to master. Before the invention of CSS everything within a webpage used to be designed using tables.

Indeed there are still a lot of html editors out there that still use tables to format a pages content, one strong word of advice, get rid of that software and start again. Tables are not extinct within webpages but they should only be used for the purpose of presenting data.

Beginning CSS? I am not going to use this article to give you a whole list of tags and how to apply them, that information would be too easily ignored. There are thousands of well rounded websites available on the net today that can walk you through the first stages of CSS, the one I would recommend would be: W3Schools CSS intro this is a perfect place to start learning CSS, in the interests of parity and fairness I will also recommend What can be achieved using CSS .