homepage Welcome to WebmasterWorld Guest from 54.226.230.76
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Fix for bad 3-column liquid CSS
Filipe




msg:1184489
 7:31 pm on May 16, 2002 (gmt 0)

I tried making a liquid 3-column CSS layout (for those of you who don't know, "liquid" or "fluid" layouts are those that vary in size depending on the browser window's size) with the center column being liquid and the left and right column being a fixed size.

The only problem is that when you make the screen size too small, the right column overlaps everything else, and stuff you have in your header often pushes everything else down - basically a trainwreck of DIVs.

I found that if you encapsulate your entire site in a single table cell, and put a transparent image with the minimum width you want (I set mine to 750 pixels) inside the cell at the very top or bottom, the CSS will never shrink past that point, but will still stretch outwards.

Some might say it defeats the purpose of using CSS in-lieu of tables in the first place - but this way you only have table tags at the very top and bottom of your document, and the overall code-to-content ratio is dramatically increased.

 

rcjordan




msg:1184490
 7:53 pm on May 16, 2002 (gmt 0)

>table... ...transparent image

That's what I did, too. Instead of the image, I used <hr> as a minimum "prop-stick" and used external css to set the width a make it hidden. I went this route because it's faster loading than an image and lightweight to code. The disadvantage is that the horizontal rule does show in NN4, but I placed it at the bottom of the column and it's not particularly obtrusive.

nwilson




msg:1184491
 8:55 pm on May 16, 2002 (gmt 0)

I got a reasonable css only 3 column jobbie done recently, you can catch it at telefonpasning.dk

It's a bit of a pain because I still had to write the html as

left-nav
right-panel
body

Which puts the content lower than I'd like but it works pretty well across the board.

There is a great example of a 3 colunm layout with a 'fluid' center colunm at glish.com if you'd care to take a peek..

Nick

Filipe




msg:1184492
 9:40 pm on May 16, 2002 (gmt 0)

Hi nwilson,

Yes, that's where I learned it. You might want to try applying our fix to your site... when you make the browser window too small, everything gets kind of whacky.

nwilson




msg:1184493
 9:50 pm on May 16, 2002 (gmt 0)

Nah.... Not so worried really, the screen has to be truly tiny before it becomes a problem, and it reads great in a text browser or screen reader..

Nick

Filipe




msg:1184494
 9:54 pm on May 16, 2002 (gmt 0)

Well, like we posted above, the fix is very easy. It couldn't hurt to make it as foolproof as possible.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved