Using 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 centered 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 centered 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:
<div class="clear"></div>
This is a useful and simple technique. It can be used for many different situations when coding a website. If you liked this article and found it interesting check my website for free CSS resources including free CSS templates and tutorials.
Like this post?
If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.
Want to learn CSS fast?
Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.
