ansaurus

Question

CSS container doesn't stretch to accomodate floats

Answer 1

+1 A:

Add overflow: hidden; to the .container selector. This will force the container to acknowledge that it has children.

Jan Hančič 2010-01-07 15:19:59

If it were as easy with deadbeat dads! :)

Pekka 2010-01-07 15:35:33

Answer 2

+13 A:

Give the container a

overflow: auto

or

overflow: hidden

see this page on quirksmode.org for details on the issue.

Pekka 2010-01-07 15:20:04

Answer 3

+3 A:

A quick fix is to add overflow: hidden to your .container.

This is not the best solution per say, merely the quickest fix. Your best solution would be to implement and apply clearfix as it doesn't have issues with printing due to overflow.

In the event you use overflow: auto or overflow: hidden and a user attempts to print the page, content that does not fit on the printed page will be clipped because:

scroll-bars do not print
hidden content does not display

cballou 2010-01-07 15:20:37

+1 because this is the only answer that mentions downsides to the `overflow` method. It's also worth mentioning that this method may result in unwanted clipping/scrollbars where the content would otherwise overflow.

eyelidlessness 2010-01-07 15:39:48

Answer 4

+5 A:

One option is to put in a <div style="clear: both;"></div> just before closing the container div.

<div class="container">

    <div class="container_left">
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    </div>

    <div class="container_right">
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    </div>

    <div style="clear: both;"></div>

</div>

Daniel Vassallo 2010-01-07 15:20:45

Definitely a safe bet w/o a need for clearfix.

cballou 2010-01-07 15:43:51

Answer 5

+1 A:

to the outer div you might want to use the clearfix css, explained here: http://www.positioniseverything.net/easyclearing.html

John Boker 2010-01-07 15:21:07

Answer 6

+1 A:

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clear { height: 1%; }
*:first-child+html .clear { min-height: 1px; }

Apply .clear to your parent element.

Nimbuz 2010-01-07 15:22:34

Answer 7

+1 A:

This might be of help "Clearing a float container"

BD 2010-01-07 15:25:37

ansaurus

tags:

views:

answers:

CSS container doesn't stretch to accomodate floats

related questions