3

OK, I'm really having problems understanding the behavior of the float property.

The page is 750 px wide. In order to keep it positioned in the center of the screen, I used this code:

<div align="center">
    <div align="left" style="width:750px; border-style:double;">
        stuff
    </div>
</div>

The elements within the main 750 px wide container are other containers that have the following styles:

div.infoCont //these containers usualy have two more containers within- for an image and text
{
    width: 740px;
    position: relative;
    left: 2px;
    border-style: double; //for debugging
    float: left;
}
div.textContNI //text only
{
    width: 730px;
    float: left;
    clear: right;
    border-style: double; //for debugging
}

The small containers behave normally (they should be, because they are positioned and as big as the way I want to). But the height of the main container is A LOT less that the total height of the smaller containers... 0 px. It ignores the height of ALL the smaller containers.

This can be "fixed" by adding text right before the closing tag of the main container. I can also manipulate the height with <br> tags and no text: the height becomes as big as the total height of the borders. Another way to "fix" the problem is to add float:left; in the style, but that positions the container on the left side of the window and I can't have that.

I'm missing something and I don't know what it is.

Why does the main container ignore the total height of the containers within it and how can I take care of this bug?

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
AlexSavAlexandrov
  • 858
  • 2
  • 13
  • 34

1 Answers1

9

Containing floated elements

This is the correct behavior of floated elements. It's not a bug.

By default, a floated element doesn't occupy space within its parent. The same happens with elements given absolute position. The parent has two children, but they're both floated, so nothing occupies space in the parent. As a result the parent has a height of zero, unless it contains some other non-floated content.

There are three common ways to make a parent contain its floated children, so that it's at least as tall as its children.

1. Fixed height

Give the parent a fixed height that's at least as tall as the height of the floated child. Technically, the floated element still does not occupy space within the parent, but the parent is tall enough to make it appear as if it does.

.parent { height: 30px; }
.child  { height: 30px; float: left; }

2. clear div

Add a trailing div with clear:both inside the parent. This forces the parent to contain the floated children. The parent automatically increases in height as needed. By default, an empty div has a height of zero in all browsers, so no additional styling is required for the trailing div.

.clear { clear: both; }
...
<div class="parent">
    <!-- Floated children go here -->
    ...
    <!-- Trailing clear div goes here -->
    <div class="clear"></div>
</div>

3. clearfix

Add a clearfix rule to the CSS stylesheet, and add the class clearfix to the parent. The end result is the same as adding a clear div, but it doesn't require adding additional HTML elements. Like adding a clear div, this forces the parent to contain the floated children. The parent automatically increases in height as needed.

/* The traditional version of clearfix, a good one to start with. */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
...
<div class="parent clearfix">
    <!-- Floated children go here -->
    ...
</div>
Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59