I have tried coding this, with divs and spans, just for it to fall apart. I don't want to use tables, so i think i need someone to code this with div's spans and such. I can change everything, i just need the simple code, so if someone can just code the css and html, i would be quite grateful.
Here is what i want it to look like:
http://www.lonelylizard.com/~eli/files2/4497538.gif
Try modifying this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
div#header{
width:100%;
background-color:#ccc;
height:50px;
}
div#leftcol{
width:20%;
background-color:#aaa;
height:auto;
float:left;
}
div#rightcol{
width:80%;
background-color:#fff;
height:auto;
float:left;
}
div#footer{
width:100%;
background-color:#ccc;
height:25px;
clear:both;
}
-->
</style>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
</head>
<body>
<div id="header">Header</div>
<div id="leftcol">Left Column<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium magna nec arcu. Donec rutrum. Aliquam sit amet elit ac arcu adipiscing aliquam. Aliquam et ipsum at felis molestie congue. Sed eget purus vel turpis semper dignissim. Nullam semper, libero gravida porttitor elementum, dui dolor viverra nibh, at hendrerit enim justo auctor sapien. Vivamus quis risus quis nisi vulputate porttitor. In hac habitasse platea dictumst. Etiam magna odio, malesuada placerat, bibendum sit amet, fringilla id, arcu. Vestibulum porta. Aliquam auctor nisi a nisi.
</p><p>
Aliquam consequat. Vestibulum id augue a libero ornare eleifend. Mauris tellus dui, faucibus ac, mollis quis, rhoncus in, ante. Etiam elementum varius diam. Donec aliquam. Nunc consequat dapibus est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sed pede et quam vulputate porttitor. Suspendisse venenatis. Curabitur ultrices pede sed diam ultricies sagittis. </p>
</div>
<div id="rightcol">Right Column. leftcol and rightcol expand vertically.
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium magna nec arcu. Donec rutrum. Aliquam sit amet elit ac arcu adipiscing aliquam. Aliquam et ipsum at felis molestie congue. Sed eget purus vel turpis semper dignissim. Nullam semper, libero gravida porttitor elementum, dui dolor viverra nibh, at hendrerit enim justo auctor sapien. Vivamus quis risus quis nisi vulputate porttitor. In hac habitasse platea dictumst. Etiam magna odio, malesuada placerat, bibendum sit amet, fringilla id, arcu. Vestibulum porta. Aliquam auctor nisi a nisi.
</p><p>
Aliquam consequat. Vestibulum id augue a libero ornare eleifend. Mauris tellus dui, faucibus ac, mollis quis, rhoncus in, ante. Etiam elementum varius diam. Donec aliquam. Nunc consequat dapibus est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sed pede et quam vulputate porttitor. Suspendisse venenatis. Curabitur ultrices pede sed diam ultricies sagittis. </p>
</div>
<div id="footer">Footer</div>
</body>
</html>