I’ve seen a lot of people in forums having problems with their container divs not expanding with the content inside. I’ve had plenty of those problems myself. One of the main reasons is that the content is inside an absolutely positioned div.
An absolutely positioned div doesn’t affect the container div at all. It’s somewhat as if the div was on top of the container rather than inside it.
If you really want to expand the container, you should either use a relatively positioned div or a div with the float property.
Relatively positioned divs are actually inside the container div, and thus it’ll expand the container div accordingly. However, the position may get affected with the surrounding content. There’s is no easy way around this problem. It may take a couple of tries to get the layout just the way you want it.
If your just doing a column layout, like the ones I’ve already mentioned, it would be better to use a floated div. Floated divs will expand the container div accordingly as well. However, there is one thing that some people forget to do in order to make it expand. They need to clear the float.
What I usually do is this:
<style type="text/css">
#floater
{
float:left;
}
.clear
{
clear:both;
}
</style>
<html>
<div id="container">
<div id="floater">
</div>
<div class="clear"></div>
</div>
</html>
The the div class “clear” basically tells the browser: “this is the end of the float.” Thus, knowing the end position, it can expand the container div.
The clear property acts kinda like a return for floats. If another float were to come after, it wouldn’t appear next to the previous div, but under it.
Hope this “clear”s things up! Haha! Get it! See what I did there? ……
RSS feed for comments on this post
