CODEWITHSUNDEEP
css
user1089548
user1089548

Reputation: 177

How to make <div> grow with content?

I got somethinglike this:

<body>
<div id="wrapper">
<div id="header">
<ul>
<li>something</li>
<li>something</li>
</ul>
</div>
<div id="content">


</div>

<div id="footer">
</div>

</div><!-- end of wrapper -->
</body>

and I applied this CSS:

#wrapper {
margin:0px auto;
width:100%;
}

#header {
background:#b82626;
}

#content {
clear:both;
float:left;
width:75%;
}

#sidebar {
margin-left:75%;
}

#footer {
clear:both;
height:50px;
}

NOW, I need content of header to grow, eg. I add many pages <li></li>, and when I exceed the space, the height of header won't grow, just the text overflows the header border and goes into main content.

So, if anyone can suggest me nice rule to apply here, It would be really nice. I need header to grow with content.

Thanks

Upvotes: 1

Views: 4610

Answers (1)

danbee
danbee

Reputation: 506

Are you floating your list items? If so then you will need to apply a clearfix to the header div.

#header:after {
  content: "";
  display: block;
  clear: both;
}

Upvotes: 3

Related Questions