I've just started getting into CSS and ran across an issue. In my code, the height of the columns adjust independently of each other. At least that seems to be the case when I view the page in Firefox 2.0. In IE7 they adjust to the height of the larger column. How do I go about controlling each, so I can have them set to the same height despite the amount of content inside it.
body {
color: #393733;
margin: 0pt;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
}
#container {
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
}
#header {
font-size: 175%;
background-color: #FFFFFF;
}
#content {
background-color: #CCFF99;
width: 50em;
margin-left: auto;
margin-right: auto;
}
#navBar {
clear: both;
padding: 0 1em;
font-size: 125%;
background-color: #A8C8A8;
}
#navList li {
float: left;
list-style-type: none;
}
#navList {
display: block;
padding: 0;
margin: 0;
}
.navLink {
color: #393733;
text-decoration: none;
}
#leftColumn {
width: 10em;
float: left;
background-color: #CCFF99;
}
#rightColumn {
width: 38em;
float: right;
position: relative;
padding: 1em;
background-color: #CCCC99;
}
#footer {
clear: both;
background-color: #FFFFE0;
width: 50em;
margin-left: auto;
margin-right: auto;
}
#header, #footer, #navBar {
text-align: center;
}
a {
display: block;
margin: 0 1em;
border-top: medium solid #A8C8A8;
border-bottom: medium solid #A8C8A8;
}
a:hover {
background-color: #A8C8A8;
border-top: medium solid #FFFFE0;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>U <3 Mr Vagabond</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">This is the header.
</div>
<div id="content">
<div id="navBar">
<ul id="navList">
<li><a href="#" class="navLink">Home</a></li>
<li><a href="#" class="navLink">Projects</a></li>
<li><a href="#" class="navLink">Miscellaneous</a></li>
<li><a href="#" class="navLink">About</a></li>
</ul><br style="clear: both">
</div>
<div id="leftColumn">This is the left column.
</div>
<div id="rightColumn">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In massa. In lacus erat, nonummy ut, sodales id, consequat eget, nisi. Nunc et neque. Etiam enim. Nulla facilisi. Proin nulla nunc, vestibulum et, pretium in, aliquam quis, leo. Aliquam at risus interdum metus dapibus luctus. Mauris ligula pede, tincidunt in, tristique ac, volutpat nec, lacus. Nullam quis velit vitae metus condimentum semper. Fusce lobortis nunc id est. Cras nulla. Maecenas diam risus, blandit quis, tincidunt elementum, facilisis sit amet, eros. Maecenas laoreet convallis augue. Aliquam fringilla odio at quam.
<br>
Integer dapibus. Cras pretium tellus convallis est. Etiam arcu. Nullam vel est. Fusce suscipit scelerisque ipsum. Nullam bibendum pharetra ligula. Nam nunc neque, accumsan sit amet, feugiat non, malesuada ut, velit. Aliquam nec pede. Phasellus vitae est. Nulla dolor arcu, lacinia ac, venenatis vitae, semper sit amet, leo. Nam egestas posuere nulla. Morbi at diam non pede nonummy fringilla. Curabitur nonummy purus non magna. Quisque posuere, leo ut auctor blandit, magna lorem egestas neque, vel euismod quam lectus id libero. Nulla facilisi. In hac habitasse platea dictumst. Sed eu orci eget orci fringilla convallis. Maecenas quis ipsum quis augue molestie volutpat. Vivamus volutpat.
<br>
Nullam ullamcorper. Nulla eros enim, ultricies eu, viverra nec, sagittis ut, mi. Pellentesque enim purus, ultrices ac, tempor eu, egestas et, elit. Fusce sagittis diam non est. Duis congue, orci eget pretium sagittis, lectus libero pretium erat, at nonummy neque tellus a quam. Nam nonummy lectus eu turpis. Fusce mollis, tellus non laoreet facilisis, dolor justo tempor velit, non dignissim est lorem ut enim. Morbi sed mi. Sed eget nisl. Nam vulputate, sapien a tincidunt pretium, nulla mi consectetuer nulla, nec mattis leo velit commodo sapien. Donec sollicitudin pulvinar urna. Quisque in est et lorem pharetra congue. Integer nonummy, risus vel vulputate porta, ipsum augue cursus mi, tristique lacinia tortor quam ac risus. Sed eget nisl. Morbi ullamcorper faucibus sapien. Maecenas quis magna.
<br>
Vestibulum nunc. Sed pharetra, ipsum nec condimentum malesuada, enim nisl venenatis urna, vitae blandit erat elit euismod felis. Nam vulputate orci ultricies dolor. Nulla varius lacinia pede. In odio augue, dictum nec, tristique sit amet, auctor sed, nisl. Cras eu arcu ac nibh pulvinar convallis. Cras orci. Duis arcu. Suspendisse ultrices diam dictum enim. Praesent congue congue ligula. Cras luctus. Vestibulum odio purus, semper eget, vestibulum sit amet, imperdiet at, ligula. Suspendisse ullamcorper elit hendrerit nisl. Quisque consequat arcu id nulla.
<br>
Cras eget ante quis sem mollis pellentesque. Nam facilisis quam eget diam. Cras mattis diam. Maecenas eget arcu sed mauris tincidunt varius. Nam sit amet sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis pede. In hac habitasse platea dictumst. Nulla facilisi. Pellentesque nibh libero, tincidunt iaculis, condimentum eget, sodales fermentum, risus. Praesent cursus consectetuer lacus. Cras vitae turpis. Pellentesque dui. Cras gravida luctus arcu.
</div>
</div>
<div id="footer">This is the footer.
</div>
</div>
</body>
</html>
