Forum Moderators: not2easy
My simple 2-column liquid layout (CSS and XHTML below) displays consistently across IE 5 Mac, Opera 6 Mac, Netscape 7 Win, Mozilla 1.5 Win.
But in IE 6 Win (my target browser, and also Opera 7 Win) the second column DIV shifts down so that the text in that column doesn't line up vertically with the text in column one. Haven't tested in IE 5 Win, but I suspect problems there too.
Is there a fix or additional code needed for proper display in IE 5/6 Win?
====== START CSS ========
/*** 2-column liquid CSS layout using floats ***/
/*** BEGIN CSS ***/
/*** HTML tag styles ***/
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
line-height: 140%;
margin: 0em;
padding: 0em;
background-color: #FFFFFF; /* */
font-size: 76%;
}
h1 {
font-size: 200%;
}
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
/*** Format Classes ***/
.subhead {
font-weight: bold;
color: #000000;
font-size: 1.4em;
font-family: Arial, Helvetica, sans-serif;
}
/*** Layout Divs ***/
#masthead{
padding: 2%;
background-color: #3399CC;
}
#left-column{
padding: 2%;
width:20%;
float: left;
margin-left: 0px;
background-color: #FFBEA8;
}
#center-column{
padding: 2% 10%;
margin-left: 24%;
border-left-width: 0px;
border-left-style: dotted;
border-left-color: #99CC00;
background-color: #D2D2FF;
}
/* Clearing the footer (clear:both;), expands the footer to full width
and places it immediately under the longest column. */
#footer{
clear: both;
font-size: 100%;
color: #000000;
padding: 0px;
background-color: #77BCDD;
text-align: center;
}
#footer img{
padding: 0px;
}
====== END CSS ========
====== START XHTML ========
<!-- START HTML -->
<!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">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<title>3-Column CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="2-column.3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- start masthead -->
<div id="masthead">
<h1>Masthead</h1>
<span class="subhead">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.</span>
</div>
<!-- start left-column -->
<div id="left-column">
<p class="subhead">Column 1</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
molestie.</p>
<p>Sed aliquam sem ut arcu. Phasellus sollicitudin. Lorem ipsum dolor sit
amet</p>
<p>onsectetuerorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Lorem
ipsum dolor sit amet. </p>
</div>
<!-- start center-column -->
<div id="center-column">
<p class="subhead">Column 2</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. orem ipsum
dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam
sem ut arcu. Phasellus sollicitudin. Lorem ipsum dolor sit amet, consorem
ipsum dolor sit amet, consectetuer</p>
<ul>
<li>llus sollicitudin. orem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.</li>
<li>Phasellus sollicitudin. Lorem ipsum dolor sit amet, consorem ipsum
dolor sit amet, consectetuer a llus sollicitudin.</li>
<li>Orem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consorem ipsum dolor sit amet,
consectetuer allus sollicitudin. orem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus
sollicitudin. Lorem ipsum dolor sit amet, consorem ipsum dolor sit amet,
consectetuer.</p>
<p>orem ipsum dolor sit amet, consorem ipsum dolor sit amet, consectetuer allus
sollicitudin. orem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
</div>
<!-- start footer -->
<div id="footer">
<span class="subhead">Footer</span>
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</body>
</html>
====== END XHTML ========
<div id="left-column">
<p class="subhead"><br />
<br />
Column 1</p>
All you have to add is two <br /> tags... unless of course you wanted the text to start that close to the header element... ( which would be ugly IMHO )
Regards,
1beb
in fact it might be an idea to override the margins on all elements, then use padding to control the spacing! (otherwise Opera also adds default margins to the bottom of the column too if I remember)
I knew about this in Opera but didn't know IE also did the same...
You're doing well for finding bugs! 2 in 2 posts ;)
Suzy
I wonder if you would happen to know about this . . . a refinement of this generic template I'm working on.
Same code as before, but I've attempted to wrap all the divs in the "wrapper" div to control margins from the browser window. Naturally, IE rendering seems buggy, creating a space between the two columns. Opera, Mozilla, work fine. Any ideas about an IE fix?
#wrapper{
margin: 40px;}
<body>
<div id="wrapper">
<div id="masthead">
</div>
<div id="left-column">
</div>
<div id="center-column">
</div>
<div id="footer">
</div>
</div>
</body>
