CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12487

Section not as large as content inside

This is a hard one for me to explain but the "section" at the top which contains the white boxes doesn't seem to be the height it should be, it doesn't seem to be as big as its containing items.

This means instead of the sections below it, sitting below it, they actually sit to the side.

The effect I'm trying to achieve is to stack the sections on top of each other vertically, but make it so the sections are as big as their content.

This is my code: http://jsfiddle.net/8Ts9c/6/embedded/result/

<section>
    <div class="container">
        <div class="price">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
        <div class="price">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
        <div class="price">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
        <div class="price">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
        <div class="price last">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
    </div>
</section>
<section>
    <h1 class="centertitle">Our plans include</h1>
</section>

Upvotes: 0

Views: 51

Answers (2)

Alfred Huang
Alfred Huang

Reputation: 18235

Your original code misses a </div> ending tag as below:

And after adding it, the problem disappears. http://jsfiddle.net/8Ts9c/7/

<section>
    <div class="container">
        <div class="price">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
        <div class="price">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
        <div class="price">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
        <div class="price">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
        <div class="price last">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
    <!-- </div> this tag was missed in your original code -->
</section>
<section>
    <h1 class="centertitle">Our plans include</h1>
</section>

Upvotes: 1

zessx
zessx

Reputation: 68790

This is because every children is floating. The parent section doesn't have any element in the usual flow, then its height is not clearly defined.

To fix it, add this CSS on your section :

section {
    min-height: 200px;
    overflow: hidden;
}

Upvotes: 2

Related Questions