Forum Moderators: not2easy
#header {
display:block;
width:100%;
overflow:hidden;
border-bottom: 1px solid red;
}
#left {
display:block;
float:left;
width:22%;
overflow:hidden;
}
#center {
display:block;
float:left;
background: transparent;
width:56%;
overflow:hidden;
}
#right {
display:block;
float:left;
width:22%;
overflow:hidden;
}
#fodder {
display:block;
clear:left;
text-align: right;
width:100%;
overflow:hidden;
border-top: 1px solid red;
}
Is this a standard IE6 problem? I set the right column's width to 21.9% and voila, problem solved. Except that Opera and Safari don't seem to recognize partial percentages, so there's a full 1% gap at right in those browsers. Oh, the humanity!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body {
background: #151515;
margin: 0;
padding: 0;
min-width: 640px;
font-family: "trebuchet ms", lucida grande, sans-serif;
font-size: 0.8em;
color: #a1a1a1;
}
#header {
display:block;
background: transparent;
width:100%;
overflow:hidden;
}
#headermenu {
background: transparent;
display: block;
border-bottom: 1px solid #51430b;
}
#headerpic {
background: black;
height: 110px;
display: block;
}
#meatwrap {
display:block;
float:left;
background: transparent;
width:56%;
overflow:hidden;
}
#feature {
background: black;
overflow: hidden;
height: 26px;
display: block;
}
#meat {
padding: 5%;
}
#meatheader {
border-bottom: 8px solid #51430b;
padding: 0 0 5px 0;
background: transparent;
}
#meat p {
margin: 20px 0 0 0;
}
#teaserwrap {
display:block;
float:left;
background: transparent;
width:22%;
overflow:hidden;
}
#teaser {
height: 1000px;
border-right: 1px solid #fc0;
}
#teaserheader {
border-bottom: 0;
margin: 0;
padding: 15px 10px 15px 10px;
background: transparent;
}
#teaser div {
padding: 15px 10px 15px 10px;
border-top: 1px solid #51430b;
background: transparent;
}
#navwrap {
display:block;
float:left;
background: transparent;
width:22%;
overflow:hidden;
}
#nav {
height: 1000px;
text-align: right;
border-left: 1px solid #fc0;
}
#navheader {
border-bottom: 0;
margin: 0;
padding: 15px 10px 15px 10px;
background: transparent;
}
#nav div {
padding: 15px 10px 15px 10px;
border-top: 1px solid #51430b;
background: transparent;
}
#fodder {
display:block;
clear:left;
text-align: right;
background: transparent;
width:100%;
overflow:hidden;
border-top: 1px solid #51430b;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headermenu">
<h5>copy goes here</h5>
</div>
<div id="headerpic"></div>
</div>
<div id="teaserwrap">
<div id="teaser">
<div id="teaserheader">
<h1>copy goes here</h1>
<h4>copy goes here</h4>
</div>
<div>
<h2>copy goes here</h2>
<p>copy goes here</p>
</div>
<div>
<h2>copy goes here</h2>
<p>copy goes here</p>
</div>
<div>
<h2>copy goes here</h2>
<p>copy goes here</p>
</div>
</div>
</div>
<div id="meatwrap">
<div id="feature"></div>
<div id="meat">
<div id="meatheader">
<h1>copy goes here</h1>
<h4>copy goes here</h4>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui orci, egestas vitae, lobortis at, luctus id, dui. Donec nec quam tincidunt velit venenatis tristique. Suspendisse sagittis semper tortor. Praesent ut dolor nec dolor tincidunt gravida. Nullam bibendum, erat rhoncus rutrum laoreet, lectus sem tempor mi, ac porttitor lectus arcu vitae lectus. Suspendisse potenti. Donec nisi eros, ultrices at, volutpat sed, sodales et, urna. Pellentesque diam. Morbi ut mi nec dolor eleifend rutrum. Vestibulum gravida. Aliquam eget turpis. Proin convallis neque viverra lectus. Curabitur varius purus ut elit.</p>
</div>
</div>
<div id="navwrap">
<div id="nav">
<div id="navheader">
<h1>copy goes here</h1>
<h4>copy goes here</h4>
</div>
<div>
<h2>copy goes here</h2>
<p>copy goes here</p>
</div>
<div>
<h2>copy goes here</h2>
<p>copy goes here</p>
</div>
<div>
<h2>copy goes here</h2>
<p>copy goes here</p>
</div>
<div>
<h2>copy goes here</h2>
<p>copy goes here</p>
</div>
</div>
</div>
<div id="fodder">
<h5>copy goes here</h5>
</div>
</div>
</body>
</html>
Pardon the div soup... there are methods to the madness. In the side columns, there's an outer div for the liquid width, then one inside that for the border/height/alignment properties, then inside that are the individual divs that make up the content items.
[edited by: Don_Hoagie at 3:14 pm (utc) on Mar. 20, 2006]
body { margin: 0; padding: 0; }
If that helps.
And I hadn't encountered the 1px issue you're talking about... i tried scooting the width around in IE and the only time I get the columns lined up right is at what appears to be the min-width of 640px.
