floats and blocking containers

Question

How do you make containers with floating elements block around the floating elements

Here is the HTML.

<div>
    <label> foo </label>
    <input type="text" />
</div>
<div>
    <label> foo </label>
    <input type="text" />
</div>

And CSS

input {
    height: 50px;
    float: right;    
    clear: right;
}

And it displays like so :

|------------------------------------------------------|
| foo                                 -----------------|
|-------------------------------------|---------------||
| foo                                 |               |
|-------------------------------------|---------------|
                                      |---------------|
                                      |---------------|
                                      |               |
                                      |               |
                                      |               |
                                      |---------------|

I would like it to display like :

|------------------------------------------------------|
| foo                                 -----------------|
|                                     |               ||
|                                     |               ||
|                                     |               ||
|                                     |---------------||
|------------------------------------------------------|
| foo                                 |---------------||
|                                     |               ||
|                                     |               ||
|                                     |               ||
|                                     |---------------||
|------------------------------------------------------|

What is the correct CSS trickery to fix this?

Just `overflow: hidden`: http://jsfiddle.net/2yr2A/20/ + http://stackoverflow.com/questions/5565668/in-2011-is-there-any-need-for-clearfix works in "every browser". — thirtydot, May 04 '11 at 15:05

score 3 · Answer 1 · answered May 04 '11 at 15:02

3

You need the clearfix trick! Basically, use CSS pseudoselectors to stick an empty block-level element after the wrapping div, forcing it to expand past the floated items. See http://jsfiddle.net/82RWe/

answered May 04 '11 at 15:02

Chowlett

45,935
20
116
150

Raynos, if you follow the tutorial Chowlett pointed to it will work in IE... note the * hacks. – Michael D May 04 '11 at 15:05
@Micheal Do I have to resort to broken CSS parser hacks? – Raynos May 04 '11 at 15:07
@Raynos: No. See my comment on your question. I would've posted it as an answer, but it's already there. Though I didn't upvote it for lack of effort. – thirtydot May 04 '11 at 15:09

score 0 · Answer 2 · answered May 04 '11 at 15:00

0

try the following code:

<html>
<head>
<style type="text/css">
    .InnerDiv {
        width: 300px;
        height: 50px;
    }

    .InnerDiv input {
    height: 20px;
    width:100px;
    float:right;
    }
</style>
</head>
<body>
    <div class="InnerDiv">
        <span> foo </span>
        <input type="text" />
    </div>
    <div class="InnerDiv">
        <span> foo </span>
        <input type="text" />
    </div>
</body>
</html>

answered May 04 '11 at 15:00

Arrabi

3,718
4
26
38

That will solve the problem for static content with height<=50px only. – Michael D May 04 '11 at 15:06
I don't want to use absolute width/heights. – Raynos May 04 '11 at 15:09

score 0 · Accepted Answer · answered May 04 '11 at 15:01

0

Try styling your div's with overflow:hidden.

answered May 04 '11 at 15:01

n8wrl

19,439
4
63
103

floats and blocking containers

3 Answers3