-1

I have been developing a site using absolute height values and was curious as to why height:auto isn't working for me, can anyone shred some light on this.

HTML Structure

<div id="site-content">
<div id="menuconatiner"></div>
<div id="review-container"></div>
</div>

CSS

#site-content{
webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
width: 938px;
padding-bottom:20px;
background-color:white;}

#menuconatiner{
margin:5px;
float:left;
width:190px;}
MPelletier
  • 16,256
  • 15
  • 86
  • 137
user2626526
  • 15
  • 5
  • 3
    Without some html and css,how can we know. – majorhavoc Aug 31 '13 at 14:56
  • -1; please post some code – tckmn Aug 31 '13 at 15:00
  • You were initially referring to the `reviews-content` div but it is changed now. If they are the same then it is because both its child elements are floated. Try removing the `float: left` on `review-container` and `height: auto` will work as you expect. (Note: Not added this as an answer because the `div` that was originally mentioned has been modified) – Harry Aug 31 '13 at 15:05
  • Thanks harry, will give it a shot. Dooknon and Sharath I posted a link to the page... There's too much html and css to post here, especially as i don't know directly where the conflict is coming from so i can't isolate the code... – user2626526 Aug 31 '13 at 15:08
  • Harry found the problem, Thanks a lot Harry. :) Could i just add a div after reviews-container like this -
    – user2626526 Aug 31 '13 at 15:13

2 Answers2

1

Use the following CSS and you wont need the height attribute anymore.

#reviews-content {
  display: table;
}

The reason why your div isn't auto expanding in height is because it contains floating elements, but you're not using a clearfix. This might be useful links:

My solution above might solve your problem now, but I suggest using a clearfix in the future.

Community
  • 1
  • 1
Jrn
  • 1,185
  • 1
  • 13
  • 27
0

As mentioned in my earlier comment in the OP, the issue is because both the child elements of the div are floated. When an element is floated, its parent no longer contains it because the float is removed from the flow. Since the parent isn't containing the child elements, the height: auto wouldn't work (actually, will work but would have no effect).

Option 1: Remove the float: left on "review-container" and height: auto will work as you expect, but this has some implications as mentioned in JrnDel's comment.

Option 2 (Best): You could add a clearfix div as mentioned in both your own comment in OP and by JrnDel in the comment for this answer.

Harry
  • 87,580
  • 25
  • 202
  • 214
  • 1
    Removing the float attribute isn't good. This will cause the element to ignore margins, etc... Instead you should use a clearfix on your floating elements to prevent it, as I explained in my awnser. – Jrn Aug 31 '13 at 15:19
  • Great. I'm just pointing it out so other people with the same problem know how to fix it. – Jrn Aug 31 '13 at 15:23
  • @JrnDel: Everybody is learning mate, so no issues pointing out better solutions :) +1 to your solution from me. – Harry Aug 31 '13 at 15:30
  • 1
    Thanks guys, very detailed responses from both of you ! – user2626526 Aug 31 '13 at 17:28