CSS make non-floating container height of floated elements inside

Question

floating elements (two header sections, a container, and a footer), and I'm trying to put the footer below the container. Everything inside the container is floated and overflows, so the container itself is of height zero and the footer shows up underneath some of my content, like this (it's the lower red bar):

enter image description here

How can I make the container the same height as the content it contains without making it fixed height or floating the container?

Here's the body of the index.html:

<body>
    <div class="headerBar">

    </div>
    <div class="tabArea">

    </div>
    <div class="container">
        <div id="featureBar">
            <div class="feature"></div>
            <div class="feature"></div>
            <div class="feature last"></div>
        </div>
        <div class="contentBox" id="medHeight">
            ef
        </div>
        <div class="contentBox" id="largeHeight">
            ef
        </div>
    </div>
    <footer>
            footer
    </footer>
</body>

And here's the stylesheet:

/**
* ========== HEADER ==========
*/

.headerBar {
    margin: 30px -10px 0 -10px;
    height: 100px;
    background: black;
}

.tabArea {
    margin: 0 -10px 0 -10px;
    height: 100px;
    background: red;
}

/**
* ========== HOME PAGE ==========
*/

#featureBar {
    margin-top: 50px;
}

.feature {
    width: 310px;
    height: 265px;
    margin-right: 10px;
    background: green;
    float: left;
}

.contentBox {
    margin-top: 60px;
    width: 100%;
    background: purple;
    float: left;
}

#medHeight {height: 270px;}
#largeHeight {height: 540px;}

.last{margin-right: 0;}

/**
* ========== FOOTER ==========
*/

footer {
    margin: 60px -10px 0 -10px;
    height: 120px;
    background: red;
}

hmm edits arent working. the first sentence is missing some text, it's supposed to be "Hey i've got four non-floating elements..." — , Feb 27 '14 at 08:03
Answer is [here](http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504) and [here](http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734) — Mr. Alien, Feb 27 '14 at 08:04
@Mr. Alien - He doesn't want to `float`. Hmmmm. Have you considered scripts........? **Vertical alignment with CSS is inherently difficult, but I can help if you'd like.** *...without making it fixed height or floating the container...* — Nicholas Hazel, Feb 27 '14 at 08:07
@NicholasHazel I didn't read the question, I can smell uncleared floats, and am sure that's what he wants — Mr. Alien, Feb 27 '14 at 08:08
^ Likely right :-) Just calling attention to what was asked vs what was provided :-) — Nicholas Hazel, Feb 27 '14 at 08:09
@NicholasHazel Yea, it's the same thing I've defined in my `clear: both;` answer, as his element is just shifting up, because of uncleared floats :) — Mr. Alien, Feb 27 '14 at 08:10
*bumped* Well, the important thing is that he understands `clear: both;`. Hopefully a responder will provide such info. — Nicholas Hazel, Feb 27 '14 at 08:11
@OP I think you have a more difficult answer than you're asking. Can you provide a JS Fiddle? — Nicholas Hazel, Feb 27 '14 at 08:16
Nice! A clear: both; in the footer solved it no problem http://jsfiddle.net/s87uP/3/ — , Feb 27 '14 at 08:23

score 1 · Accepted Answer · answered Feb 27 '14 at 08:34

If i understand correctly all you need to do to fix this is clear the floats before the container ends.

1. You can simply apply a clearing div before end of container.

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

2. My peronal preference however is to create a clearing class: (At the end of you stylesheet to maximize specificity).

.CF:before,.CF:after{content:"";display:table;}
.CF:after{clear:both;}

Then simply apply this class to the containing div of any floated elements. The result is the containg div will clear floats before it closes.

So for you code above.

HTML

<body>
    <div class="headerBar">

    </div>
    <div class="tabArea">

    </div>
    <div class="container CF">Container
        <div id="featureBar">
            <div class="feature">Feature 1</div>
            <div class="feature">Feature 2</div>
            <div class="feature last">Feature 3</div>
        </div>
        <div class="contentBox" id="medHeight">
            ef
        </div>
        <div class="contentBox" id="largeHeight">
            ef
        </div>
    </div>
    <footer>
            footer
    </footer>
</body>

CSS

.headerBar {
    margin: 30px -10px 0 -10px;
    height: 100px;
    background: black;
}    
.tabArea {
    margin: 0 -10px 0 -10px;
    height: 100px;
    background: red;
}  
#featureBar {
    margin-top: 50px;
}    
.feature {
    width: 310px;
    height: 265px;
    margin-right: 10px;
    background: green;
    float: left;
}    
.contentBox {
    margin-top: 60px;
    width: 100%;
    background: purple;
    float: left;
}

#medHeight {height: 270px;}
#largeHeight {height: 540px;}

.last{margin-right: 0;}

footer {
    margin: 60px -10px 0 -10px;
    height: 120px;
    background: red;
}
.CF:before,.CF:after{content:"";display:table;}
.CF:after{clear:both;}

DEMO HERE

http://jsfiddle.net/s87uP/4/

score -1 · Answer 2 · answered Feb 27 '14 at 08:15

-1

add to your css..

.container{
  height: auto;
  margin: 5px; // optional
}

answered Feb 27 '14 at 08:15

user2819448

1
2

CSS make non-floating container height of floated elements inside

2 Answers2