Fixed AND Liquid Layout

by @jehiah on 2005-04-17 04:42UTC
Filed under: All , HTML , Javascript , CSS

Molly Holzschlag asks where the diplomatic middle is in her post Fixed Versus Liquid. I have a preferences which we will go into, but it really is a nice happy medium.

Fixed Left, Liquid Content

The general idea is that navigation isn’t where you want to expand the page, but the content is. This approach also draws a line in the sand and says that the center content can only expand or contract within reason. This helps keep a page readable by keeping text from running into oblivion on those 30 inch apple displays, and on the 15 inch displays.

I like a leftnav of 170 pixels wide, and a center content that is liquid between 530 and 830 pixels wide.

[css]
#leftNav{width:170px;}
#mainContent{
    width:100%;//set default to liquid
    // in IE with javascript set to max , min, or page width minus left nav
    width:expression(document.body.clientWidth>1000?"830px":
        document.body.clientWidth<700?"530px":
        document.body.clientWidth-170);
    max-width:830px;//set min & max for mozilla
    min-width:530px; 
}
[/css]

There is even a really cool example page.

Subscribe via RSS ı Email
Jehiah Czebotar