CODEWITHSUNDEEP
htmlcsscss-floatheight
JohnA
JohnA

Reputation: 13

Div doesn't seem to extend in height

So, I have this:

HTML:

<div id="main">
    <div id="top"></div>
    <div id="mid">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="bottom">
    </div>
</div>

CSS:

#main {
    height: auto;
    width: 300px;
    background: black;
}
#top {
    height: 1px;
    width: 300px;
    background: yellow;

}
#mid {
    height: auto;
    width: 300px;
}
.item {
    height: 20px;
    width: 90px;
    color: red;
    float: left;
    margin-left: 2px;
    margin-top: 2px;
}
#bottom {
    width: 300px;
    height: 1px;
    background: yellow; 
}

Demo

This is basically supposed to be a navigational menu. It's a simplistic version of the one on the actual site obviously but functionality wise this is how it should work.

The #main is the primary wrapper of the whole thing, it's meant to contain all the elements. For this reason it has height: auto; as it's height will depend on the number of items in it.

The #top is just an empty div with a different background color to act as a top border (on the site this is an image, hence the need for a div).

Then #mid will contain all the actual items (yes, you can argue this is not necessarily needed but it's presence has no influence over the issue at hand).

Then .item will be the actual list items inside the whole thing. Now, if you try the code you'll see that in the whole parent div only 3 items will fit in a horizontal row and beginning from the 4th item it will start a new row; then if you add more it will again add a new row beginning from the 7th.

So far so good but the problem is that the divs #main and #mid do not increase in height after the first row; they completely ignore any rows created down below despite height: auto; . Why is this so and how to fix it?

Upvotes: 1

Views: 95

Answers (3)

kleinfreund
kleinfreund

Reputation: 6800

I've worked with your demo and made a working update

What I've changed:

  • I removed height: auto; from #main because this is already the standard value and doesn't need to be set
  • I added a so-called clearfix(google it) to clear the floated items. If you float an element, it's removed from the regular document flow, so this is needed

Added CSS: (Clearfix source)

.cf:after{
    content: "";
    display: table;
    clear: both;
}

Added HTML:

<!-- added class="cf" -->
<div id="mid" class="cf">

Upvotes: 1

hitaboy
hitaboy

Reputation: 26

You have to push the height of the div declaring a element into de div with clear:both; This, makes that the height of the div container the same as the height of all floated items. Here you have it:

http://jsfiddle.net/hitaboy/cXaws/4/

<div id="main">
    <div id="top"></div>
    <div id="mid">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="clearer"></div>
    </div>
    <div id="bottom"></div>
</div>

Upvotes: 0

Nagarajan A
Nagarajan A

Reputation: 89

try it by adding !important after the css property. e.g : #mid { height: auto !important; width: 300px !important; }

Upvotes: 0

Related Questions