Proper way to contain floating elements using HTML/CSS?

Question

Say I have the following HTML:

<head>
    <style>
        #container {
            border: 1px red solid;
        }
        .floaty {
            width: 200px;
            float: left;
            border: 1px green solid;
        }
    </style>
</head>
<body>
<div id='container'>
    Text inside the container
    <div class='floaty'>
    Floaty block 1<br/>
    Floaty block 1<br/>
    Floaty block 1<br/>
    </div>
    <div class='floaty'>
    Floaty block 2<br/>
    Floaty block 2<br/>
    Floaty block 2<br/>
    </div>
    <div class='floaty'>
    Floaty block 3<br/>
    Floaty block 3<br/>
    Floaty block 3<br/>
    </div>
</div>
</body>

This renders as: floaty divs

What's the proper CSS way to have the container (red-bordered box) completely surround the floaty green-bordered boxes?

Nick Craver · Accepted Answer · 2010-07-22 12:13:06Z

20

Add an overflow: auto to the container, like this:

#container {
     border: 1px red solid;
     overflow: auto;
}

You can test the effect here, and find a very good description of how it works here.

edited Jul 22, 2010 at 12:13

answered Jul 22, 2010 at 12:08

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Roy Tang Over a year ago

Will this work for all browsers? I don't have access to a Windows machine at the moment, so can't test IE.

Nick Craver Over a year ago

@Roy - You may have to give the element a width in IE for it to behave correctly, just depends which versions you have to support.

Paul D. Waite Over a year ago

It’s worth commenting your use of overflow to indicate that it’s intended to contain floats. Although this behaviour is correct as per the spec, it’s not the obvious result of applying overflow. I wish there was a contain-floats: contain; properly in CSS.

Nick Craver Over a year ago

@Paul - I completely agree, and a decent replacement for <center> as well. It seems completely ridiculous to me that this still isn't in CSS3. I'm well aware you can do it, but there's no simple replacement for variable width centering.

Paul D. Waite Over a year ago

Did <center> ever do variable width centering? I guess it did with tables?

Pekka · Accepted Answer · 2010-07-22 12:07:59Z

3

add overflow: auto to the container or apply a clearfix.

answered Jul 22, 2010 at 12:07

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Comments

ExE Boss · Accepted Answer · 2021-05-09 21:45:25Z

0

On modern browsers, you can use display: flow‑root; or the contain property, which are the non‑hackish way to do this:

https://developer.mozilla.org/docs/Web/Guide/CSS/Block_formatting_context

answered May 9, 2021 at 21:45

ExE Boss

1261 silver badge4 bronze badges

Collectives™ on Stack Overflow

Proper way to contain floating elements using HTML/CSS?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related