Re: [WSG] Liquid layout with fixed width elements

Alan Trick Thu, 10 Mar 2005 12:09:34 -0800

Here's a way that would work on most browsers. The middlestuff div isn't mandatory, but it is usefull if you want to have a background, if you don't use middlestuff then you'll have to use #footer{clear:both} .

HTML:
<div id='header'></div>
<div id='middlestuff'>
   <div id='leftbar'></div>
   <div id='rightbar'></div>
   <div id='content'></div>
</div>
<div id='footer'></div>
CSS:
for all
#middlestuff{overflow:auto}

for leftbar | content | rightbar:
#leftbar{float:left;width:10em}
#rightbar{float:right;width:12em}
#content{margin:0 12em 0 10em;}

for leftbar | rightbar| content :
#leftbar{float:left;width:10em}
#rightbar{float:left;width:12em}
#content{margin:0 0 0 22em;}

for content | rightbar| leftbar :
#leftbar{float:right;width:10em}
#rightbar{float:right;width:12em}
#content{margin:0 22em 0 0;}

if you want content | leftbar | rightbar or rightbar| leftbar | content you'll have to use absolute positioning (I think) which would screw up your footer

[EMAIL PROTECTED] wrote:

Hi all,

I've done some research on this and can't quite come up with a viable
solution.

What I have is this: a header, main content, side content 1, side content
2, and footer. The side contents are fixed with. The header, main, and
footer are liquid.

This is the way the markup flows in the document as well. What I'd like to
do is figure out how to make several liquid layouts without changing the
markup. I want one where if you look at the page, you see (from left to
right): side content 1 then main. Another where main comes before side
content 1. Another where it shows side content 1, main, side content 2.
(Header and footer come before and after respectively like normal)

I've been able to achieve this just fine with fixed layouts using the same
markup with no problems and it works in all common browsers on Win/Mac. My
question to all of you is, is this possible to do with liquid layouts? If
so, how? If not, what would I need to make it work with liquid layouts?

Any help is appreciated.

Nicholas Rougeux

art, the web, and everything in between
http://www.c82.net

******************************************************
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************


******************************************************
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************

Re: [WSG] Liquid layout with fixed width elements

Reply via email to