Forum Moderators: not2easy
here is my structure
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body {
margin:10px 10px 0px 10px;
padding:0px;
width:800px;
}
#wrapper {
white-space:wrap;
}
.section {
margin:0px;
padding:0px;
border:1px solid black;
margin-bottom: 5px;
}
.leftbox{
border-bottom:1px solid black;
border-right:1px solid black;
margin-top: -10px;
margin-left:-5px;
width: 120px;
min-height: 260px;
_height: 220px;
_margin-top: 0;
clear:left;
float:left;
margin-bottom: -1px;
padding-left: 3px;
_padding-left: 10px;
}
.middle{
min-height: 250px;
padding-top: 10px;
padding-left:5px;
padding-left: ;
border-bottom:1px solid black;
margin-bottom: -1px;
_height: 260px;
_padding-top: 0;
_border-bottom: 0;
_border-top: 1px solid black;
_margin-top: -1px;
}
.rightbox{
border-style:solid;
border-width:0px 0px 1px 1px;
width:100px;
float: right;
background-color:#fff;
font-size:12px;
padding: 0 5px 5px 5px;
margin-bottom:-1px;
_margin-bottom:-1px! important;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="section">
<h2>topic one</h2>
<div class="rightbox">
stuff goes here
</div>
<div class="middle">
<div class="leftbox">
test
</div>
<div class="content"><br>
This should wrap around the box to the right when it hits the side of it, however it will not if you have the the .middle height set. I can't seem to figure out why it's doing this but any help would be great, thanks.
</div>
</div>
</div>
</body>
</html>
having it wrap isn't a critical to the site, but I don't like having all the white space on the right hand side.
Say you have this code...
html:
<div id="container">
<div id="sidebar">SIdebar</div>
<div id="content">Content</div>
</div>
css:
#container{
float:left;
}
#sidebar{
float:left;
width:100px;
}
#content{
width:500px;
}
#Sidebar is floated and content is given a width (or height!). In compliant browsers, the dimension doesn't matter because the left edge of both divs (#sidebar and #content) start at the same place. Only the line boxes in #content are shortened by the float, the actual block level div slides underneth the float.
But IE messes this up. Because the non-floated #content div has a width (or height!), it doesn't slide the #content div underneath the floated #sidebar. Instead it starts it's width at the edge of the float. This is in clear violation of the specs, but there it is.
In your case, it's not breaking your layout other than the fact that it doesn't wrap beneath the float.
Unfortunately, there is no known fix for this bug other than not applying a dimension (width or height) to the element adjacent to the float. You can leave you min-height in there for compliant browsers because IE doesn't recognize it, but the IE specific _height will need to go.
cEM
Your using both paddings and margins, IE messes both of them up.
The only difference in how IE and FF (or any other browsers) render padding is when there isn't a doctype and IE uses the Quirks box model. Both browsers handle margin exactly the same no matter what box model is being used.
give the side bar a left margin equal to the width of the content
That's going to be a problem in this particular layout since the content doesn't have a width.
But to see whether it works, I created a layout that does have a width and added a left margin to the sidebar. It increased the width of the entire layout (margin adds to the outside of the box + IE auto-enclosing behavior ignores explicit width settings and stretches the layout to include the new margin). It also had no effect on the wrapping in IE. Since the problem is that IE doesn't start the width of the non-floated div until the edge of the float, increasing the margin only moves that starting point further in, resulting in an even larger gap.
Nice idea, though.
Bottom line: this is a bug in the IE browser. It is well-documented, and unless someone has seen something recent that I've missed, there is no known cure. Much like the common cold, the only sure-fire way not to catch this bug is to avoid exposing yourself to it in the first place.
cEM
