CODEWITHSUNDEEP
csshtml
Takkun
Takkun

Reputation: 6361

CSS Section Automatically Adjust Height?

I have a HTML section "all" that wraps around two other sections. I'm having trouble getting the website to adjust the height of the "all" section based on the length of stuff I put into the other two sections.

<section id="all">
   <section id="left_content">
      <p>Something here.</p>            
   </section>
   <section id="right_content">
      <p>Something here.</p>
   </section>
</section>

I currently have the height set at a fixed size of 700px. I was wondering if it was possible in the CSS, to have that section's height be related to the size of the left_content and right_content sections.

#all {
    width: 900px;
    height: 700px;
    margin: 0 auto;
    padding-top: 20px;
    background: #F4F4F4;
}

#left_content {
    float: left;
    width: 570px;
    margin-top:-20px;
    padding: 0px 20px 10px 20px;
    line-height: 25px;
    font-size: 12px;
}

#right_content {
    border-left:4px solid #cccccc;
    float: right;
    width: 250px;
    padding: 0px 10px 20px 20px;
    line-height: 20px;
    font-size: 12px;
}

Upvotes: 2

Views: 19171

Answers (2)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

  • Don't give #all a height
  • Clear your floats

Your wrapper cannot determine a height while child items are floating. You need an element that "ends" the floating. <div style='clear:both'></div> is a common way to clear floats. Clearfix is another technique.

Read more: http://css-tricks.com/all-about-floats/

Upvotes: 7

chipcullen
chipcullen

Reputation: 6960

Remove the height declaration for #all (like Diodeus said). You will then need to apply either a clearing element below the two content divs (like a footer), or apply a clearfix to the div #all.

For instance:

/* For modern browsers */
#all:before,
#all:after {
    content:"";
    display:table;
}

#all:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
#all {
    zoom:1;
}

This is a direct copy & paste of Nicolas Gallagher's excellent micro clearfix.

Upvotes: 2

Related Questions