CSS Challenge: Can this layout be done?

HTML & CSS
1

So i’m trying to get my head round whether this can be done or not and be flexible in browsers ideally…

Basically everything is fixed apart from the content in the middle, say its blog posts, which you scroll through everything else remaining static.

The central content also has a black line left and right.

Now the space between the top and bottom of the left and right lines needs to be the same say 30px regardless of browser size, within reason obviously.

I’m toying with possible fixed top/bottom and left/right then having the lines as images but not sure if that will work.

Oh its left aligned too, not centred in the browser.

Any ideas?

Many thanks if you can :slight_smile:

2

This is a 3cols fixed footer layout, having the header and sides fixed also. You should start from there.

3

I think this old example has all the elements that you will need to construct what you want.

CSS - Fixed header, footer and sidebars in all but ie6

Be very wary of fixed layouts as they seldom work well. Fixed headers and footers are ok but sidebars seldom work and you have to create extra scrollbars to keep content visible.

Or if you just want a scrollable cen ter without using position:fixed then something like this.

4

Thanks guys.

Its not i that want it, blumin designer wants it like this, rubbish if you ask me!

:slight_smile:

5

It’s always the way :slight_smile:

Shout if you get stuck.

The only sticking point I see is: “what are the exact dynamics of the content outside the middle section”?

It’s hard to see how that will work unless it’s in a 3 col layout like my example.