Dynamic 3col CSS
Trying to create a three column layout that sizes by percents can be fairly tricky, so I have put together my best attempt at it for review. I still suggest to use a fixed width for your middle column, but it is not necessary
This layout uses a CSS hack for Internet Explorer due to the display limitations with IE. As shown here using a percentile width for the middle column rather than fixed, wherever your floated left or right columns stop in height IE will allow your middle column to spill over to take up the unused space where the middle column is larger in height than the other columns. This may sound like what is supposed to happen when you have a float, and an inline element, however this inline element should take it’s percentile size from the main div wrapping the 3 columns, which is the case with firefox. By modifying the css height property for the selector #left_nav to read height:10px; you can test this prior stated problem. The only way to fix this problem is by giving the middle column a fixed width. Below is the code and demonstration for a percentile width. I hope this helps anyone pursuing to create a 3 column layout with percents and css.
Notice that the middle column is given the css display property of display:inline-block; if this is not done attempting to clear the floats within the middle column will clear the floats outside of it pushing the middle column below the floats and that is not good. Because of the inline nature of this layout it is a must to have your left and right columns appear prior to the middle column in your html code.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr” lang=”en-US”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>float3col demo</title>
<style>
#tub_con{
display:block;
position:relative;
text-align:center;
width:60%;
height:auto;
margin-left:auto;
margin-right:auto;
border: solid #000000;
}
#left_nav{
display:block;
position:relative;
float:left;
height:200px;
width:30%;
max-width:30%;
border: solid #000000;
}
#right_nav{
display:block;
position:relative;
float:right;
height:200px;
width:30%;
max-width:30%;
border: solid #000000;
}
#mid_cont{
display:block;
position:relative;
padding-top:5px;
margin-left:auto;
margin-right:auto;
height:auto;
width:36%;
z-index:252;
border: solid #f86fff;
}
*html #mid_cont{
display:block;
position:relative;
padding-top:5px;
margin-left:auto;
margin-right:auto;
height:auto;
width:100%;
border: solid #f86fff;
}
</style>
</head>
<body style=”text-align:center;”>
<div id=”tub_con”>
<div id=”left_nav”></div>
<div id=”right_nav”>
</div>
<div id=”mid_cont”>
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
</div>
<div id=”mid_cont”>
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
</div>
<div style=”clear:both;”></div>
</div>
<p style=”width:100px; border:solid #000000; margin-left:auto; margin-right:auto;”>
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
</p>
</body>
left_nav, Height = 200px
right_nav, Height = 200px
mid_cont, Height = not set
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
Tags: Firefox, Float, IE, Inline, Margins, Percent, Size, Three Column, tricks