Fixed AND Liquid Layout
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.
#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;
}
There is even a really cool example page.
3 years ago
Your example page shows the content encapsulated in a red border. In Firefox, when I resize the page, the right side of the border cannot be seen… in fact the scroll bar enables me to see it if I scroll right.
Any way to fix this?
3 years ago
@Matt: as i note on the example page; it’s off by one pixel because i added the border so you could specifically see it. Is that what you are talking about? If not, can you link to a screenshot, or email me?