Forum Moderators: not2easy
<html>
<head>
<style type="text/css"><!--
#right {
float: right;
background-color: pink;
width: 125px;
height: 225px;
}
#left {
background-color: green;
width: 400px;
height: 400px;
}
--></style>
</head>
<body>
<div style="width: 500px; background-color: black;">
<div id="right"></div>
<div id="left"></div>
</div>
</body>
</html>
This works fine with overlap (see below) on Mac.Safari Mac.Firefox Mac.IE Mac.Mozilla PC.Netscape PC.Firefox PC.Opera but not on PC.IE. On PC.IE the "left" div waits for the "right" to clear.
<snip>
So I'm missing something. Tell me what it is.
[edited by: SuzyUK at 4:26 pm (utc) on May 3, 2004]
[edit reason] snipped graphic links [/edit]
the divs won't behave properly in IE becuase of it's float model problems.
The float is supposed to be out of the flow.. i.e. it's meant to float over the top of everything else, but IE still allows for the width of the float when it's calculating the width that's left over in your "wrapper" :(
You can get make the divs look like you want if you give the float a negative margin the same as its width that way you are making the "space" for it but that won't help if this is a continer for content as it would go under the float then.
You could then pad then content to bring it back into line.. not sure what the rest of the effect involves.. so here's some CSS to play with.. it's only the bold bits I added really..
#right {
float: right;
background-color: pink;
width: 125px;
height: 225px;
margin-left: -125px;
position: relative;
margin-top: 30px; /* added so you can see where content goes */
}#left {
background-color: green;
color: #fff;
width: 400px;
height: 400px;
}#left p {margin: 0; padding: 10px 25px;}
Note that the content in the left div is inside a <p> which is padded, because if you add the padding directly to the left div there would be box wdith problems ;)
Suzy
