Good morning CSS gurus . . .
This 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 IE 5/6 Win and Opera 7 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 ========
Bookmarks