CODEWITHSUNDEEP
htmlcss
Able
Able

Reputation: 3912

DIV element height not growing auto

The DIV elements height is not growing even after I set the height property as auto.please see the CSS snippet below

#main_site {
  position: absolute;
  background-position: center; 
  top: 295px;
  width: 950px;
  background-color: #FFF;
  height: auto;  
}

I have one image in in the content DIV, the image align property is right, but in IE8, the image showing left.

<p><img src="images/image.jpg" align="right" hspace="5" alt="images..." /> The above code is working fine in Firefox, but NOT working in IE8.

Please correct me if I did any mistake.

Upvotes: 2

Views: 2321

Answers (4)

Alex
Alex

Reputation: 9031

try adding float:left; Should do the trick

Upvotes: 4

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174967

Like said here, if you have a floated element inside, the div won't gain height. however, that doesn't mean you need extra markup. 

Overflow: hidden;

Will force it to recalculate its height. which in turn will cause it to grow as expected.

Upvotes: 4

Joe Conlin
Joe Conlin

Reputation: 5994

height:auto only tells the div to set the height to the tallest internal element. If you have floated internal elements, try adding the following right before the close of your #main_site div:

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

This will ensure that you #main_site div "wraps" the internal elements.

Upvotes: 0

Mo.
Mo.

Reputation: 304

Are the contents of the #main_site div floated? If so that could be the problem. You may need to post more HTML/CSS

Upvotes: 0

Related Questions