I am writing a web page that has a vertical menu bar on the left hand side and a main content pane on the right. I used CSS floats to accomplish this, but when the page is resized, the content can get “pushed under” the menu. To correct this, I used jQuery to dynamically resize the content pane, and it seemed to work well in FF3, Chrome 5, and IE8. But when I tested in IE6 the browser seemed to get caught in an infinite resizing loop of some kind. I don’t know why.
I ended up using browser sniffing to work around it, but I know that is not a particularly reliable technique. Is there some way to correct the behavior for IE6? If not, is there a better way to detect this than by browser sniffing? Finally, am I over-thinking this problem by throwing JavaScript into the mix? Can I create a 2 column web page that looks nice when resized with just CSS?
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>IE 6 Resize Madness</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" >
<link rel="stylesheet" type="text/css" href="home.css" >
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="home.js"></script>
</head>
<body>
<h1><span id="id_title">IE 6 Resize Madness</span></h1>
<div id="sidebar">
<ul id="main-nav">
<li>
<a href='#'>Nav Link 1</a>
</li>
<li>
<a href='#'>Nav Link 2</a>
</li>
<li>
<a href='#'>Nav Link 3</a>
</li>
<li>
<a href='#'>Nav Link 4</a>
</li>
</ul>
</div>
<div id="content">
<p class="first">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</p>
</div>
</body>
</html>
Stylesheet
html {
height: 100%;
background-color: Teal;
}
body {
background-color: Teal;
margin-left: 0;
padding-left: 0;
margin-right: 0;
padding-right: 0;
}
h1 {
text-align: center;
margin-bottom: 0.5em;
}
a {
font-family: Verdana, sans-serif;
color: silver;
}
a:hover {
color: white;
}
/* Navigation menu. */
ul#main-nav {
font-family:helvetica,arial,sans-serif;
margin:0;
padding:0;
width:10em;
/*width: 100%;*/
}
ul#main-nav li {
margin:0;
padding:0;
list-style:none;
margin:0 0 0.3em 0;
}
ul#main-nav li a {
text-decoration:none;
display:block;
padding:0.3em 0.5em;
border:2px solid indigo;
color:#003;
background:#fff;
}
ul#main-nav li a:hover {
border:2px solid black;
color:#000;
background:#efefef
}
#sidebar {
/*width: 10%;*/
width: 12em;
margin-left: 0;
padding-left: 0.75em;
margin-right: 2em;
padding-right: 0;
float: left;
clear: left;
background-color: Teal;
}
#content {
font-family:helvetica,arial,sans-serif;
font-size: 1.2em;
width: 75%;
margin-top: 0;
padding-top: 0;
margin-left: 0;
padding-left: 0;
margin-right: 2em;
padding-right: 0.5em;
float: right;
clear: right;
background-color: teal;
}
p {
padding-left: 0.5em;
margin-left: 0.5em;
}
.first {
margin-top: 0;
padding-top: 0;
}
JavaScript
$(document).ready(function(){
//Fade in the paragraphs.
$("#content p").hide();
$(document).click(function(){
$("#content p").show();
})
;
$("#content p.first").fadeIn("slow", fade_in_next_paragraph);
//Set content width.
set_content_width();
//IE6 goes crazy with resize events!
//I hate having to do browser detection, but I am not sure what
//feature support I need to test.
//IE8 in standards mode doesn't go into infinite recursion, but it
//treats the right content pane as a static size and adds scroll bars
//if the user tries to resize the window.
//FF and Chrome seem to resize just fine. Not sure which
//behavior is correct.
if($.browser.msie && parseFloat($.browser.version) < 8.0) return;
$(window).resize(set_content_width);
})
;
function set_content_width()
{
var body_width = $("body").width();
var sidebar_width = $("#sidebar").outerWidth(true);
var jq_content = $("#content");
var content_width = jq_content.width();
var delta = jq_content.outerWidth(true) - content_width;
jq_content.width(body_width - sidebar_width - delta);
}
function fade_in_next_paragraph()
{
var jqobj = $(this).next("p");
if(jqobj.length > 0)
{
jqobj.delay(3000).fadeIn("slow", fade_in_next_paragraph);
}
}
Since when do ie6 users deserve to view a nice webpage? Ie6 is almost 10 years old!
Now to your layout, try this: