div to grow with internal divs. not working

[adrianbromfield]

Hi guys, im wondering if any one can help with solve something, im used to creating sites using tables and am trying to use divs instead. And i have come across a problem. I have created a div and i have 3 divs inside that div, hoping that the main div will grow in height with the others so that the background color of it will show through. However this only seems to work for one div. As soon as i put a new one in the main div does not grow anymore.

Has any body else had this and know how i can get round this?

I know this idea would work using tables but im trying my hardest to get away from them!

Thanks for any help in advance.

Adrian

[Setek]

You'll need to provide more information... are you absolutely positioning one of the inner columns? Are you floating them all?

There are differing methods of fixing the problem depending on how you've coded your page :)

[adrianbromfield]

they are all positioned withing a main div, using absolute. is this what you mean? there is no floating.

i have also tried to over come the issue using tables with rowspan and colspan but apparantly there is no way to do that either as IE doesnt allow the height attribute when using these. Which then pushes other things out of place.

again i appreciate any help :)

thanks...

[beaudeal]

do something like this:

.clear {
  clear: both; }
<div id="container">
  <div id="left">left<div class="clear"></div></div>
  <div id="center">center<div class="clear"></div></div>
  <div id="right">right<div class="clear"></div></div>
</div>

this should make it so that the container div expands to contain the three that are inside it.

[Setek]

do something like this:

.clear {
clear: both; }

<div id="container">
<div id="left">left<div class="clear"></div></div>
<div id="center">center<div class="clear"></div></div>
<div id="right">right<div class="clear"></div></div>
</div>

this should make it so that the container div expands to contain the three that are inside it.

That's not going to work. adrianbromfield's said:

they are all positioned withing a main div, using absolute. is this what you mean? there is no floating.

clear

only works on floats.

This is a bit tricky - there are a couple of ways, from here on in, or there's rewriting :)

You could use javascript to calculate the height of the tallest column and set the parent's height accordingly...

... or I believe you can absolutely position the parent, so it will acknowledge its children - though this is not without its problems.

Or, you could rewrite it to use floats, which is easier, because then you can simply clear the floats, and all is well.

Hope that helps :)

[edited by: Setek at 10:44 pm (utc) on Mar. 8, 2007]

[beaudeal]

nice catch, didnt notice the part about absolute positioning -- id def. just rewrite to float them if its not too difficult though...my 2 cents