DIV/CSS Layout Problem

[beaver6813]

Hey Guys,

I'm currently creating a new design for my personal site and have moved on to try and create a two sidebar layout with the header at the top, as you scroll down the header stays at the top etc

However the container for the sidebars and content is not stretching to fit properly, it works in IE (i didnt intend for it to work in IE and not FF :P) but not in FF, if anyones got any ideas to make it work that would be great. The entire container with the background should contain all TEST text.

http://www.beaver6813.com/temp/design/

The red background part is the content area, i've done that so you can see it goes outside the container, how can i get the container to be as large as the content box and sidebars.... (Take a look at the source code to see what i mean ^^)

Rep obviously to anyone who can help, ill give all my remaining $NP as well, but its not much :P

 

[beaver6813]

Anyone got any ideas..? I'm really stumped with this :P

 

[coreymanshack]

Set height and auto flow attributes maybe? In the end, it's always better to start out in Firefox then work out IE bugs.

 

[beaver6813]

Hmm, i've tried putting those attributes on the different parts and setting to auto doesn't help at all, setting to 712px, which is the height of the background also doesn't help... I did originally plan for this to work in FF first, but it seems IE doesn't mind it :P

Anyone got any other ideas?

 

[coreymanshack]

I didn't mean auto flow, I meant to say overflow, I have no clue why I said auto flow.

 

[beaver6813]

Hey,

Played around with overflow on different parts of the div's... and... it worked :D God its always the simple problems that cause big errors...

Now for the bonus round, again this only happens in firefox but i suspect its just the way it renders backgrounds, you get a juttery background when scrolling up and down, i assume its the background trying to stay centered and at the bottom... But does anyone know a work-around for this dodgy rendering?

 

[cef]

This doesn't happen on the mac at all. Works fine in Camino, Firefox and Opera. In Safari you have a little problem with the header disappearing once you start scrolling, but no jitter in any of the browsers.

Seems like a pc-firefox-specific bug (anyone tested on the pc in Opera?)

 

[coreymanshack]

Hey,

Played around with overflow on different parts of the div's... and... it worked :D God its always the simple problems that cause big errors...

Now for the bonus round, again this only happens in firefox but i suspect its just the way it renders backgrounds, you get a juttery background when scrolling up and down, i assume its the background trying to stay centered and at the bottom... But does anyone know a work-around for this dodgy rendering?

I'm sure there is nothing you can do about that... it's a firefox/cpu/graphics card rendering thing.

 

[beaver6813]

CEF, i praise you! Thank you very much for your testing :D What i'll do is try playing around with different image formats, see if that will make firefox render the background correctly :P If not... then it'll have to be jittery...

Thanks guys for your help I'll have to sit down one day and just install every browser on linux and windows under the sun on a virtual machine :P

 

[cef]

CEF, i praise you! Thank you very much for your testing :D

No prob. Not many people around here seem to have Macs, so I jump in every so often.

Thanks guys for your help I'll have to sit down one day and just install every browser on linux and windows under the sun on a virtual machine :P

Ugh, been there done that. No fun, but sometimes necessary. And, ironically, since you mentioned the sun, don't forget Solaris :cy: