Wrapper div won’t expand to the sidebar height?

[Nashira]

Hi! I recently downloaded the layout bases from the download section here, and they’re quite good but I’ve come across a problem. When the content of the sidebar is longer than the content of the main section, I can’t get the wrapper div to expand to hold it.

The divs aren’t floated so far as I can tell, so that’s not the problem. Is there any way of fixing this? It happens both on unmodified versions and ones I’ve styled to suit my needs

here’s my test site with a layout from here, modified but where the sidebar doesn’t respect the wrapper: http://crowned-meadow.net/conctest/search/

Any ideas?

[wolfcry911]

The divs aren’t floated – that is the problem. The navigation is position: absolute which removes it from the document flow – there is no way for the wrapper to expand to contain the AP div.

There are a couple of things you could do. If you know the height of the nav won’t change you could set the min-height of the wrapper to that height. But what I would do is float the nav and have the wrapper contain it with any one of a number of ways – my suggestion here is overflow: hidden;

Also, I’m guessing you’ll need to give the wrapper a background color (white).

[Nashira]

I tried to float it last night and it didn’t work… but now it is. Sigh. Thank you! Though perhaps whoever made the layout packs here should fix that little bit of code? is there a way to contact them?

Edit: oh yes I remember why I undid it last night, I can float the sidebar and then that works fine, but it pushes the content down and then makes it go all strange and over the place when I try to float the main content dive to the right.

[wolfcry911]

You don’t need to float the main content div to the right – just leave it as is. Or, if you would like to float, you need to remove the large left padding (it’s too large to fit as is).

[Nashira]

I’ve got it to doing this now: http://img214.imageshack.us/img214/7207/f9fb0022a51a477ebf9d381.png which is better than what it was doing before, I’ll keep trying to fix it, though last time I tried to move the divs around it threw a royal fit at me, so this may have to do for now.

Thank you all :)

[wolfcry911]

Also, I’m guessing you’ll need to give the wrapper a background color (white).

[Nashira]

Oh, I did that. It just doesn’t seem to be behaving. the header, sidebar, wrapper and content elements all have a white background specified.

[Michael_bonds]

Hi Nashira, I haven’t gone through all the comments here, and I only quickly went over your css. A quick and reliable fix to your issue would be to apply overflow: hidden; to the css of your wrapper div. This will fix your problem. Another fix would be to create a new div at the bottom of your wrapper with the css rule clear: both; which clears any floats.

Hope this helps

-Mike

[Nashira]

Overflow:hidden on the wrapper seems to have worked. Thank you so much!

[Author]

Posts