Min and Max Width 3 Column Fluid CSS Layout

Fluid layouts are often shunned by designers due to the perceived lack of control of the design. If the browser window is too small then content can look squashed whilst a large browser window can lead to readability issues due to long lines of content. However, CSS provides us with possibilities to control our design whilst also giving a little flexibility for a fluid layout.

Here’s an example of the code in action:

• Min and Max Width 3 Column Fluid CSS Layout

The code for the main structure itself is covered in the 3 Column Fluid CSS Layout Tutorial so if you’re unsure of any of the basics of the layout then it may be a good idea to start their first.

HTML

The HTML itself is no different to the previous tutorial and should be pretty straightforward

<div id="container">
<div id="header">
<h1>Page Title</h1>
</div>
<div id="additional">
<p>Morbi convallis lectus a elit. Morbi augue. Aenean quis ipsum non dui interdum egestas. Suspendisse quis turpis. Suspendisse et sem in neque dictum hendrerit. Nulla pede.</p>
</div>
<ul id="navigation">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<div id="content">
<h2>Page Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pulvinar eros eu diam. Quisque ut orci ut nunc lobortis aliquam. Praesent metus. Pellentesque luctus. Suspendisse nisl.</p>
<p>Morbi convallis lectus a elit. Morbi augue. Aenean quis ipsum non dui interdum egestas. Suspendisse quis turpis. Suspendisse et sem in neque dictum hendrerit. Nulla pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pulvinar eros eu diam. Quisque ut orci ut nunc lobortis aliquam. Praesent metus. Pellentesque luctus. Suspendisse nisl.</p>
</div>
<div id="footer">
<p>&copy; <a href="https://dave-woods.co.uk">Dave Woods</a></p>
</div>
</div>

CSS

* {
padding: 0;
margin: 0;
}
body {
font-size: 100%;
font-family: arial, verdana, helvetica, sans-serif;
background-color: #CCC;
}
h1 {
font-size: 1.6em;
}
h2 {
font-size: 1.4em;
}
a, a:link {
color: #CCC;
}
a:hover {
color: #FFF
}
#content p {
margin-bottom: 10px;
}
#container {
font-size: 0.8em;
margin: 0 auto;
padding: 20px;
overflow: hidden;
min-width: 700px;
max-width: 1000px;
}
* html #container {
width:expression(((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth)
> 1100 ? "1000px" : (((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) < 705 ? "700px" : "auto"));
}
#header {
background-color: #99CC99;
padding: 30px;
border: 1px solid #000;
margin-bottom: 20px;
}
#navigation {
float: left;
width: 200px;
padding: 10px;
background-color: #669966;
border: solid 1px #000;
list-style: none;
}
#additional {
float: right;
width: 200px;
padding: 10px;
background-color: #99CC99;
border: solid 1px #000;
}
#content {
margin-left: 242px;
border: solid 1px #000;
padding: 10px;
background-color: #FFF;
margin-right: 242px;
}
#footer {
background-color: #669966;
padding: 10px;
border: 1px solid #000;
margin-top: 20px;
text-align: center;
}

As you can see, the CSS is also very similar to the previous tutorial but with a few modifications.

Min and Max width

All modern browsers understand min and max width so we can specify widths for these on the container so that it will adjust its size automatically between these two widths.

I’ve specified a min-width that works well at a small size whilst I’ve specified a max width which still allows for the content to be read easily.

Min and Max width for IE6

Of course, things are never quite that simple and if you’re testing in IE6 (which you always should) then you’ll notice that this has no effect. That’s because IE6 doesn’t understand the min or max values and therefore we need to put a hack in place.

For this, I’ll be using expressions.

* html #container {
width:expression(((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth)
> 1100 ? "1000px" : (((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) < 705 ? "700px" : "auto"));
}

Whilst expressions are only understood by IE, I like to use the star selector hack to apply the expression so that it keeps it separate from the other styles but there’s nothing stopping you from including it within your main style if you so wish or you could even include it within a conditional comment includes stylesheet.

Within this expression we’re setting the min and max width to the same 1000px – 700px range as the main styles so when you test this page, it should render identically in IE6 and the modern browsers.

Summary

Fluid layouts can be a little trickier to overcome especially for the designer who is particular about their layout and who wants to maintain control but fluid doesn’t necessarily mean 100% which I hope this tutorial helps to explian.

As usual, any comments or questions or more than welcome below.