I’ve been working on a web page that I want a left hand menu column on with the content being on the right. Pretty easy right? Well, yeah, unless you want a background color in the left hand column and you want it to extend all the way down to the footer, especially if the right hand column is longer than the left. Well I did some web searching and what I came up with was the suggestion of putting an image as a background to create a virtual image… which is great if you want a fixed width column. So after doing some looking I found a way to do it with CSS. Now I by no means claim to be the originator, but I didn’t find this solution by searching google.
The results of the code below can be seen here (http://www.servergoon.com/samples/2column.html) , and yes, I purposefully used Red Green and Blue just so the concept would stand out a bit more. The CSS attached to the html page is minimal to achieve what I wanted, please feel free to take it and use it as you may. I’ve tested this on Chrome, Safari, Opera, Firefox and IE on a Win7 machine. As always, your mileage may vary.
The code for the web page is :
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header"> header </div> <div class="content"> <div class="contentLeft"> <ul><li>item1</li><li>item2</li><li>item3</li></ul> </div> <div> <p>Est purus in enim amet. In placerat integer in, platea porttitor, pulvinar elit aliquam nunc est, dapibus a aliquam odio amet. Elementum, urna magna sit? Placerat, sociis tristique ac hac! Pid aliquam aenean ac augue? In turpis aliquet amet, nunc massa etiam sit pid dapibus, lundium lectus augue. Sed a arcu et? Enim tortor sagittis? Augue? Sit scelerisque, duis eu, facilisis phasellus nisi elit porttitor, nascetur duis et augue purus tincidunt etiam. Dictumst sit in pulvinar phasellus, turpis, montes est, a ultrices nec tortor, rhoncus quis magnis? Nunc enim ut turpis pulvinar, duis dis non, elementum, augue dictumst in magna dis odio non et enim? Etiam! In purus parturient ridiculus. Nisi integer? Dis pulvinar proin turpis sed a a urna.</p> <p>Porttitor dapibus purus? Aenean etiam? Turpis urna porta hac? Nunc amet, scelerisque? Vel in, ac? Habitasse pulvinar, natoque diam, ultricies nec scelerisque aliquam, pulvinar turpis, non! Tincidunt. Platea elit, mauris ac porta adipiscing! Nisi dignissim, proin auctor risus nec dapibus porttitor velit cras! Ridiculus? Odio integer lorem diam porttitor odio platea et tortor elementum! A, aliquam cras tincidunt in? Tincidunt duis, ut dapibus lectus et scelerisque, parturient urna, a massa ac, nunc cras turpis, aliquam, mus porttitor? Magna parturient phasellus in ac, est natoque tortor non. Adipiscing! Turpis ultricies, placerat turpis cum turpis adipiscing turpis. Elit turpis in integer? Pulvinar, est, odio aliquam tincidunt! Adipiscing dignissim, dignissim? Magnis auctor, a porta, lorem in mattis! Scelerisque phasellus rhoncus! Lundium tempor.</p> </div> </div> <div> footer </div> </body> </html>
The css for the page is :
@charset "utf-8";
/* CSS Document */
.header {
background-color:#00F;
width:100%;
}
.content {
width:100%;
background-color:#FFF;
clear:both;
overflow:hidden;
}
.contentLeft{
width:25%;
margin-bottom:-999px;
padding-bottom:999px;
border-right:solid #000 1px;
float:left;
background-color:#0F0;
}
.contentRight{
width:74%;
float:right;
}
.footer{
background-color:#F00;
width:100%;
}
I hope you find this useful. It seem the key is the margin-bottom and padding-bottom in conjunction with the overflow:hidden of the containing folder.
–Server Goon
