Forum Moderators: open
The container is set at 1010px and the content area should be at 800px with left menu 175px wide (this allows 10px for padding on container and leaves 25 px left over. It loads fine in the Mac browsers but on Win XP IE6 the content area drops down below the left menu for anything under 600 pixels on content area and then it leaves a large blank space on left between left menu and content area which doesn't show up in other browsers.
Is there somethine else I need to do to get this to work in WinXP IE6
Here is relevant CSS currently set with content at 600px:
.container {width:1010px;
margin-left:auto;
margin-right:auto;
padding-left:10px;
border: 1px solid #cccccc;}
.content {width:600px;
padding-left:175px; }
.leftmenu {float:left;
width:175px;
font-family:'Comic Sans MS', 'TSCu_Comic', cursive; }
-------HTML-------
<div class="container">
<div class="leftmenu">
#######links for menu############
</div>
<div class="content">
########content######
</div>
</div> <!--EndContainer-->
have a look at this example, it may help. ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css"><style type="text/css">
#container {
width:985px;
padding:10px;
border:1px solid #ccc;
margin:auto;
overflow:auto;
background-color:#fee;
}
#content {
width:780px;
padding:10px;
margin-left:10px;
float:left;
background-color:#eef;
}
#leftmenu {
width:175px;
float:left;
font-family:'comic sans ms',TSCu_Comic,cursive;
background-color:#efe;
}
</style></head>
<body><div id="container">
<div id="leftmenu">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
</ul>
</div><!--end #leftmenu--><div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
</div><!-- end #content --></div> <!-- end #container -->
</body>
</html>
I had to reduce the content by 20px for it to work but it's OK now.
Thanks much!
No problem, you're welcome. ;)
