CODEWITHSUNDEEP
google-chromecss
Quentamia
Quentamia

Reputation: 3294

Why is the height of my div tag being calculated as 0 in Chrome?

I'm working on a webpage (link text), but I'm having trouble with the height property in Google Chrome. If you view the page, you'll notice that there is no background color. This is because the #mainContent has a height of 0px. In Internet Explorer, this is not the case. Does anyone have ideas?

Upvotes: 5

Views: 4682

Answers (5)

attack
attack

Reputation: 1523

Haha, this will be a hard question for you to check as answered because there are a variety of ways to clear floats. (You can also try floating #mainContent as well)

Here's the wonderful quirksmode article.

Upvotes: 2

Henry C
Henry C

Reputation: 4801

I have a feeling it will be something to do with the contents of the #mainContent div not pushing out the container properly. You should be able to fix this a number of different ways, such as using a clearing div.

Add the following css:

.clearfix{
    clear:both;
}

And add a div with the clearfix class before closing the maincontent div: 

<div id="mainContent">
    <div id="rightSide">
     ...
    </div>
    <div id="content">
     ...
    </div>
    <div class="clearfix"/>
</div>

This should remind the browser to force open the mainContent div to fit its contents.

Upvotes: 2

anq
anq

Reputation: 3262

Everything inside of #mainContent is floating. Floats don't make their container resize. The easiest solution is to add a clear right before then end of #mainContent like so:

<div id="mainContent">
<!-- inner bars -->
<div style="clear:both;"></div>
</div>

Upvotes: 8

Greg W
Greg W

Reputation: 5239

This is because the inner content is being floated. Parent elements do not take the height of floated children. Try adding overflow: hidden; to the #mainContent css.

Upvotes: 16

isildur4
isildur4

Reputation: 331

try explicitly defining the default

height:auto;

Upvotes: -2

Related Questions