471,119 Members | 1,549 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,119 software developers and data experts.

Float and margin problems in IE

Ned
I am having trouble with a layout that I am trying to convert from
table based layout to css based layout. I have included source code
for a stripped down version.

The problem is that when the content area is wider that the browser
window, it drops below the left floated div, which will be a
navigation area. This only happens in IE. Firefox, Opera etc all seem
fine with it.

You can see the effect if you open the code below in an 800x600
browser, then shrink the browser window until the green bar disappears
off the right hand side. As soon as it does, the content drops.

Any ideas will be greatly appreciated since I have been fighting with
this one for far too long.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html lang="en">
<head>
<title>Test Doc</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<style media="all" type="text/css">
<!--
#leftbox
{
float:left;
width:200px;
background-color:red;
}
#content
{
background-color:blue;
margin-left:200px;
}

#contentbody
{
height:1%;
background-color:yellow;
}

#testregion
{
background-color:lime;
width:500px;
}
-->
</style>
</head>

<body>
<div id="leftbox">
<p>This is the left box - with a fixed width</p>
<p>This is the left box - with a fixed width</p>
</div>
<div id="content">
<div id="contentbody">
<p>This is the content area</p>
<div id="testregion">This is the test region</div>
<p>This is the content area<br>
This is the content area<br>
This is the content area<br>
This is the content area<br>
This is the content area<br>
This is the content area<br>
This is the content area<br>
This is the content area</p>
</div>
</div>
</body>
</html>
Jul 20 '05 #1
0 1499

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Ian Watts | last post: by
2 posts views Thread by Rainer Birkenmaier | last post: by
2 posts views Thread by Rainer Birkenmaier | last post: by
3 posts views Thread by yawnmoth | last post: by
4 posts views Thread by Chris Sharman | last post: by
7 posts views Thread by alex.krupp | last post: by
2 posts views Thread by krsgoss | last post: by
3 posts views Thread by hantechs | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.