I want to have a page layout that gives me a header section that spands 100% of the width, then a three-column section below the header. The first column is 130px fixed width. The second column is variable width. This is where the core content will go. The third column is an ad column fiixed at 130 px and aligns to the right side of the page. The next section that spans below these three columns is the footer section.
Tha page needs to fill the browser window so the content section needs to expand and contract to accomodate the two fixed width columns
Is this possible? I know how to do it with a fixed width page. Now, I'm having a problem figuring out how to create the second and third columns in the second row. Any help would be greatly appreciated.
__________________________
_______
|_________________________
________|
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
__________________________
_______
|_________________________
________|
==================Sample Code So Far ========================
<!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=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Header {
width: 100%;
padding: 0;
margin: 0;
clear: both;
float: left;
}
#NavCol {
width: 130px;
padding: ;
margin: 0;
float: left;
}
#ContentCol {
padding: 0;
margin: 0;
float:left
}
#AdCol {
width: 130px;
padding: ;
margin: 0;
float: right;
}
#Footer {
width: 100%;
padding: 0;
margin: 0;
clear: both;
float: left;
}
-->
</style>
</head>
<body>
<div id="Header">
Header Content
</div>
<div id="NavCol">
navigation<br />Controls
</div>
<div id="ContentCol">
Content Column<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qu
</div>
<div id="AdCol">
Ad Bar
</div>
<div id="Footer">
This is the footer
</div>
</body>
</html>
