4 replies [Last post]
ComfortablyNumb
ComfortablyNumb's picture
Offline
newbie
North Wales
Last seen: 10 years 19 weeks ago
North Wales
Timezone: GMT+1
Joined: 2010-05-26
Posts: 6
Points: 10

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?

ComfortablyNumb
ComfortablyNumb's picture
Offline
newbie
North Wales
Last seen: 10 years 19 weeks ago
North Wales
Timezone: GMT+1
Joined: 2010-05-26
Posts: 6
Points: 10

...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   
[              ]

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

ComfortablyNumb wrote: I

ComfortablyNumb wrote:

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.

ComfortablyNumb
ComfortablyNumb's picture
Offline
newbie
North Wales
Last seen: 10 years 19 weeks ago
North Wales
Timezone: GMT+1
Joined: 2010-05-26
Posts: 6
Points: 10

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

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

dont add height to content

dont add height to content container. Do not use absolute, or fixed, positioning for the footer.