Two “Continues” Columns

Sidebar

“With malice toward none, with charity for all, with firmness in the right as God gives us to see the right, let us strive on to finish the work we are in; to bind up the nation's wounds; to care for him who shall have borne the battle, and for his widow and his orphan - to do all which may achieve and cherish a just and lasting peace, among ourselves, and with all nations.” Lincoln's Second Inaugural Address, March 4, 1865.

“The dogmas of the quiet past are inadequate to the stormy present. The occasion is piled high with difficulty, and we must rise with the occasion. As our case is new, so we must think anew, and act anew. We must disenthrall ourselves, and then we shall save our country.” Lincoln's Second Annual Message to Congress, December 1, 1862.

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”

• In Mozilla, go to View > Use Style > Static, Static.
• In Opera, go to View > Style > Static, Static.
• For Phoenix users you will need Alternate Stylesheet Switcher Extension to do the same thing as Mozilla.

---

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%;
}