Hi,
I have a three column layout with equalizing columns. It’s been done several times before and there is nothing new about it.
I wanted to see if I could build a content first layout without referring to other layouts for examples on code structure.
It works fine in FF and IE6, but IE7 is having trouble getting the width correct on the Content div (the center column). I had to set the width to 100% to get FF and other browsers to line up the Content div properly.
I also noticed that IE7 doesn’t give a 100% width on my “Expand Column” link in the center column. However it does on the left and right, just wondering if that is related to the width issue mentioned above.
I gave a red background color on one of the wrappers to make the problem easy to spot in IE7. If you drag your browser window left and right you will see a gap on the left of the center column that changes (grows and shrinks) at various stages of viewport width.
Thanks in advance for any ideas on why IE7 doesn’t want to behave.
Here is the complete code to test with, I think the problem lies somewhere within the three selectors I highlighted in red -
<!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" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Equal Columns ~ Content first in source</title>
<meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css">
/* ---------Reset -------- */
body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
margin:0;
padding:0;
}
/* ------ End Reset ------ */
body {
background: #BBB;
padding:20px 0;
}
html {overflow-y:scroll;} /*keep scrollbar present in FF*/
h1, h2, h3, h4, p {
margin:0;
padding: 10px 10px 0 10px;
}
#wrapper {
margin: 0 auto;
width: 85%;
min-width:670px;
max-width:1000px;
background: #BCC5E1; /*sidebar color*/
border: 1px solid black;
/*overflow:hidden; /* float containment for modern browsers */
}
#header {
min-height:80px;
text-align:center;
border-bottom: 1px solid black;
}
* html #header {height:80px;} /*min height for IE6*/
#navbar {
height:2em;
background:#8293C3;
text-align:center;
border-bottom: 1px solid black;
}
[COLOR=Red]#contentwrap {
float:left;
display:inline;/*IE6 needs this*/
margin-left:175px;
margin-right:175px;
border-left: 1px solid black;
border-right: 1px solid black;
background:red; /*#EEF; /*content color*/
}
#innerwrap {
float:left;
position:relative;
/*width:100%;*/
}
#content {
float:right;
width:100%;
background:#EEF; /*content color*/
padding-bottom:10px;
}[/COLOR]
#left {
float:left;
width:175px;
margin-left:-176px;
padding-bottom:10px;
position:relative; /*IE6 needs this*/
background:#BCC5E1;
}
#right {
float:right;
width:175px;
margin-right:-176px;
padding-bottom:10px;
position:relative; /*IE6 needs this*/
background:#BCC5E1;
}
#footer {
clear:both;
height:2em;
background:#8293C3;
text-align:center;
border-top: 1px solid black;
}
p.expand {padding-top:20px;}
p.expand a:hover{
display:block;
height:250px;
background:skyblue;
}
code {font-weight:bold; color:green}
</style>
<!--[if IE ]>
<style type="text/css">
#right {left:1px;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<h2>Three Equalizing Columns</h2>
<h4>Main Content or Left Sidebar can be first in the html source</h4>
</div>
<div id="navbar">
<h4>Navigation</h4>
</div>
<div id="contentwrap">
<div id="innerwrap">
<div id="content">
<h2>Main Content</h2>
<p>With this layout you have the option of locating either the "Main Content" or the "Left Sidebar"
first in the html source order.</p>
<p>The <code>#content</code> div is floated right and the <code>#left</code> div is floated left
and they are both contained in the <code>#innerwrap</code> div which is floated as well for the
sake of containing it's floated children, either one (content or left sidebar) can come first
in the source order without altering the CSS structure.</p>
<p>Lorem ipsum dolor sit amet consectetuer ut velit consequat consequat ut. Pede et Suspendisse
faucibus Suspendisse dis risus quis fermentum justo egestas. Fusce lacinia non orci Aenean auctor
eget interdum et Aenean nulla. Nulla Morbi id Curabitur quis et quis metus pellentesque euismod
congue. Congue Praesent consequat urna id Sed Curabitur libero ornare platea orci.</p>
<p>Lorem ipsum dolor sit amet consectetuer ut velit consequat consequat ut. Pede et Suspendisse
faucibus Suspendisse dis risus quis fermentum justo egestas. Fusce lacinia non orci Aenean auctor
eget interdum et Aenean nulla. Nulla Morbi id Curabitur quis et quis metus pellentesque euismod
congue. Congue Praesent consequat urna id Sed Curabitur libero ornare platea orci.</p>
<p class="expand"><a href="#">Expand Column</a></p>
</div>
<div id="left">
<h3>Left Sidebar</h3>
<p>Lorem ipsum dolor sit amet consectetuer ut velit consequat consequat ut. Pede et Suspendisse
faucibus Suspendisse dis risus quis fermentum justo egestas. Fusce lacinia non orci Aenean auctor
eget interdum et Aenean nulla.</p>
<p class="expand"><a href="#">Expand Column</a></p>
</div>
</div>
<div id="right">
<h3>Right Sidebar</h3>
<p>Lorem ipsum dolor sit amet consectetuer ut velit consequat consequat ut. Pede et Suspendisse
faucibus Suspendisse dis risus quis fermentum justo egestas. Fusce lacinia non orci Aenean auctor
eget interdum et Aenean nulla.</p>
<p class="expand"><a href="#">Expand Column</a></p>
</div>
</div>
<div id="footer">
<h4>footer stuff</h4>
</div>
</div>
</body>
</html>
