Ach, laddy, that's easy.
The technique I use puts a double div around the content. This simplifies the CSS requiring less 'hacks' to work. The big trick on these types of layouts is using a negative margins to make the fixed width columns 0 width, riding them up next to the 100% width floated outer wrapper. The first one (right) drops into place with a negative left margin, the second one (left) you have to give a negative relative position of 100%.
Basically this for markup:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Template Design CSS
</title>
</head><body>
<div id="pageWrapper">
<h1>
Site Title
<span></span>
</h1>
<div id="contentWrapper"><div id="content">
<h2>Page Content Here</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<!-- #content, #contentWrapper --></div></div>
<div id="firstSideBar">
<p>First SideBar Test</p>
<p>First SideBar Test</p>
<p>First SideBar Test</p>
<p>First SideBar Test</p>
<p>First SideBar Test</p>
<p>First SideBar Test</p>
<p>First SideBar Test</p>
<p>First SideBar Test</p>
<p>First SideBar Test</p>
<p>First SideBar Test</p>
<!-- #sideBar --></div>
<div id="secondSideBar">
<p>Second SideBar Test</p>
<p>Second SideBar Test</p>
<p>Second SideBar Test</p>
<p>Second SideBar Test</p>
<p>Second SideBar Test</p>
<p>Second SideBar Test</p>
<p>Second SideBar Test</p>
<p>Second SideBar Test</p>
<p>Second SideBar Test</p>
</div>
<div id="footer"><hr />
Footer Content Here
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
and this for CSS:
Code:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
body {
text-align:center; /* center #pageWrapper IE 5.x */
font:normal 85%/140% arial,helvetica,sans-serif;
background:#FED;
}
h1 {
padding:16px 0;
font:bold 140%/120% arial,helvetica,sans-serif;
color:#FFF;
background:#080;
}
#pageWrapper {
position:relative; /* make IE report width for second columns relative position */
min-width:752px;
max-width:1104px;
margin:0 auto;
}
* html #pageWrapper {
/*
IE has no min/max width, but we can fake it
with an expression. First we set a fixed width
as a lowest common denominator for when jscript
is disabled, then we run the expression to overload
it if jscript is present.
*/
width:752px;
width:expression(
(document.body.clientWidth>1152) ? "1104px"
: ((document.body.clientWidth>800) ? "auto" : "752px")
);
}
#contentWrapper {
width:100%;
float:left;
}
#content {
margin:0 200px;
padding:0 1em;
background:#FFF;
}
#firstSideBar,
#secondSideBar {
position:relative;
float:left;
width:190px;
background:#FFF;
}
#firstSideBar {
margin-left:-190px;
}
#secondSideBar {
left:-100%;
margin-right:-190px;
}
#footer {
clear:both;
background:#EDC;
}
Will get that job done for you. I tossed a copy up on my server to show it in action.
http://www.cutcodedown.com/for_other.../template.html
... and that should work in everything all the way back to IE 5.0
i know im not doing much..but im learning..thx for the commented code 
Originally Posted by noonnope
Bookmarks