Wed, 2010-05-26 13:36
Hi All,
First post so go easy!!!
I have a page layout that's going pretty well (so I thought) where I'm using position:relative containers and positioning divs inside containers using position:absolute. All works great.
However, I've come across a snag. I want the central 'content container' to be fluid, as dynamic content changes. Otherwise the footer div will be all over the show.
Here's a rough layout (pretty much standard)
[master wrapper] fixed
[ [header] ]
[ ]
[ [ ] ] want this bit to be fluid
[ [content] ] but with some elements
[ [ ] ] positioned absolutely
[ ]
[ [footer] ] fixed
[ ]
I've tried placing the content wrapper into another wrapper that isn't set as relative and ive tried using overflow:auto and clear:both in a vain attempt to get it to work.
It's looking to me that you can't mix and match the two ways of doing it.
Any ideas?
Wed, 2010-05-26 13:47
#1
...a bit clearer -
...a bit clearer - sorry!
[master wrapper] fixed [ [header] ] [ ] [ [ ] ] want this bit to be fluid [ [content] ] but with some elements [ [ ] ] positioned absolutely [ ] [ [footer] ] fixed [ ]
Wed, 2010-05-26 14:53
#2
ComfortablyNumb wrote: I
I want the central 'content container' to be fluid, as dynamic content changes. Otherwise the footer div will be all over the show.
containers are fluid by default. Unless you set a fixed height, it will automatically flex with the content. So, the problem is the footer?? research sticky footer.
Wed, 2010-05-26 15:39
#3
I thought that the content
I thought that the content should just flow. But unless I add a height to the content wrapper, the footer ends up at the top of the page which isnt a great look!
Thanks for ya help.
Numb
Wed, 2010-05-26 15:48
#4
dont add height to content
dont add height to content container. Do not use absolute, or fixed, positioning for the footer.