Flexible CSS Layouts

[MGoddard]

I am really trying to create a particular design as a flexible layout however running into a problem. The design (created by a designer) has implemented left and right vertical shadow borders that extend the full height of the page.

I know how to implement this design feature using fixed width layout but really would like to create a flexible layout if possible.

I have uploaded a dummy layout thumbnail to give an idea of what I have to do. Like I mentioned, I know how to implement this width a fixed width layout using body background etc. However I am really shooting for being able to make this design flexible as possible as well as meeting the design requirements of expanding full height within all browsers as required.

Possible for flexible layout or doomed to stay with fixed width?

Thank you for any feedback and/or suggestions.

M

[ralph.m]

Short of using CSS3 multiple backgrounds (which only works in one or two browsers currently) you could apply the left border image to a wrapper and have a div within it that carries the right border.

[Paul O'B]

Hi,

There are two ways you can do this for a full 100% height layout.

The first is similar to what ralph mentions above but in a 100% high layout some trickery is needed and we repeat one side image twice in separate divs so that it can break out of the constraints of a 100% high layout.

http://www.pmob.co.uk/temp/full-length-borders.htm

The second way is to use my absolute overlay techniques and shown in this example for someone else on the forums.

[MGoddard]

hmmm I thought about the first option as well but that wouldn't meet the requirement of the full height.

Interesting workarounds. I'll definitely try those. Thank you everyone for posting your thoughts and suggestions. I is greatly appreciated.

M