So what is going on?

This is an example of a two column layout using CSS that makes the two columns look like they are the same length even though they are not. The two divs (sidebar and content) that are the columns are both in another div (holder) that has a background image that gives the illusion.

HTML

<div id="holder">
   <div id="sidebar">
       Side Bar…
   …</div>
      <div id="content">
       Content…
   </div>
</div>

CSS—Static, Fluid

body #holder{
   background-image : url(bg.png);
   background-position : left;
   background-repeat : repeat-y;
   float : left;
}

body #holder #sidebar{
   float : left;
   width : 190px;
   padding : 5px;
}

body #holder #content{
   margin-left: 200px;
   padding: 0 10% 0 5%;
}

You can also view this example with a both columns static, both columns fluid, and also with a left fluid column and a right static by switching to the alternate stylesheet “Static, Static,”“Fluid, Fluid,” or “Fluid, Static”


CSS—Static, Static

body #holder{
   background-image : url(bg.png);
   background-position : left;
   background-repeat : repeat-y;
   float : left;
   width: 650px;
}

body #holder #sidebar{
   float : left;
   width : 190px;
   padding : 5px;
}

body #holder #content{
   margin-left: 200px;
   padding: 0 10% 0 5%;
}

CSS—Fluid, Static

body #holder{
   background-image : url(bg2.png);
   background-position : left;
   background-repeat : repeat-y;
   float : left;
   width: 100%
}

body #holder #sidebar{
   float : right;
   width : 190px;
   padding : 5px;
}

body #holder #content{
   margin: 0 250px 0 auto;
   padding: 0 5% 0 10%;
}

CSS—Fluid, Fluid

body #holder{
   background-image : url(bg3.png);
   background-position : 50% 0;
   background-repeat : repeat-y;
   float : left;
   width: 100%
}

body #holder #sidebar{
   float : right;
   width : 40%;
   padding: 0 3% 0 7%;
}

body #holder #content{
   width : 40%;
   padding: 0 3% 0 7%;
}

© 2003 Seamus P. H. Leahy
You may take and improve upon this.