Typical CSS three column layout (cont…)
The two methods that I discussed in my earlier post were not the only ways to do it, but they’re some of the cleaner and easier ones to implement.
Here is a site with various layouts that you could use.
There is no easy way to get a minimum width column to work in IE6, because it simply doesn’t support the “min-width” attribute in CSS. Again, there are a few ways to getting around this obstacle. This site shows one way to force IE6 to change the width of the column.
If you didn’t feel like clicking the link, I’ll post the code here just for you.
HTML/CSS:
<style type='text/css'>
#example_3 div
{
border:solid 1px #600;
}
#example_3 .main
{
min-width:450px;
/* IE Dynamic Expression to set the width
width:expression(document.body.clientWidth < 550 ? "450px" : "100%" );
}
#example_3 .boxOut
{
float:right;width:25%;height:250px;
}
#example_3 .content
{
margin-right:25%;
}
</style>
<div id='example_3'>
<div class='main'>
<div class='boxOut'><p>This is a box out</p></div>
<div class='content'>
<p>
This is the content of the page<br />
</p>
</div>
</div>
</div>
Explanation:
Notice the width:expression(document.body.clientWidth < 550 ? “450px” : “100%” ).
expression()
This allows you to execute style related javascript. I’ll break down this particular call.
document.body
This is a call to, you guessed it, the body of the document, or everything within the <body></body> tags. “clientWidth” is a call to the width of the element preceding it. So it is basically getting the value of the body’s width. If you want to call a specific div tag say <div id=”column”>, then you just replace “document.body” with “getElementById(”column”).”
document.body.clientWidth < 550 ?
This is a conditional statement basically saying “if the width of the body is less than 550 pixels, do something.”
450px :
This is the minimum width value of the “main” div. So if the conditional is true, then set the width of “main” to 450px.
100%
This is the initial size that you want the width of the “main” div to initially be.
This site has a really efficient way to making a simple three column layout without any of these css “hacks.” Only downfall is that it doesn’t keep the minimum width in IE6.
RSS feed for comments on this post
