CODEWITHSUNDEEP
css
mckeegan375
mckeegan375

Reputation: 255

Automatic resizing of div for dynamic content

Im hoping someone can help me with a CSS problem. I'm using JavaScript to add additional rows to a table which is working fine however my page doesn't expand when I add new rows which means that the content becomes invisible as it disappears off the page.

Here is a simplified version of my webpage:

<div class="wrapper" >
  <section id="main" class="column">
     Expanding table code here.
  </section>
</div>

I also have the following CSS:

.wrapper {
width:1200px; 
overflow:hidden; 
margin:0 auto; 
border:1px solid #999;
border-bottom:2px solid #999;
}

section#main {
width: 77%;
min-height: 500px;
float: left;
margin-top: -2px;
}

I have tried adding overflow:hidden; to the CSS for the main section as I thought this might work but it didn't. If I remove the main section then it works fine but I need this because I have other content within my wrapper div.

Any help would be much appreciated as this is driving me mad!!!

Thanks in advance :)

Upvotes: 1

Views: 3245

Answers (1)

Ben Lee
Ben Lee

Reputation: 53359

[EDIT: It was pointed out to me in the comments that the OP is already using a float clearing method. Leaving my answer here though in case it helps someone with a similar problem but no clearing css.]

It's because you are floating section#main. Floated areas need a clearing div after them (or float-clearing css) because they don't actually take up vertical space themselves. You can do it like this:

<div class="wrapper" >
  <section id="main" class="column">
     Expanding table code here.
  </section>
  <div style="clear: both;"></div>
</div>

The <div style="clear: both;"></div> is the traditional way to do it, but you may want to consider a new method described here: http://www.quirksmode.org/css/clearing.html

Upvotes: 1

Related Questions