Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
div.container {
border-left: 10px navy solid;
width: 100%;
height: 100%;
}
div.link {
float: left;
background-color: green;
width: 200px;
height: 100%
}
div.linkbar {
background-color: purple;
color: white;
width: 100%;
}
div.content {
border-left: 10px cyan solid;
margin-left: 200px;
height: 100%;
background-color: yellow;
}
div#footer {
background-color: red;
height: 20px;
width: 100%;
clear: both;
}
</style>
</head><body>
<div class="container">
<div class="link">
<div class="linkbar">
Some Links </div>
Link 1<br />
Link 2<br />
Link 3<br />
Link 4<br />
Link 5<br />
Link 6<br />
Link 7<br />
Link 8<br />
</div>
<div class="content">
<h2>Some Content Here</h2>
This is the content.
</div>
</div>
<div id="footer"></div>
</body>
</html>
html, body, #container {
height:100%;
}
good luck!
I was all set to reply that after adding the html {100%} tag, it still wasn't working. I am designing in Expression Web 2, and it was still displaying the same incorrect behavior. Before posting, however, I thought it would be prudent to see how it looked in the various browsers. Happily, it is now displaying correctly in IE and all the Mozilla browsers. Just a reminder of how inconsistent Microsoft programs are from one product to the next.
