Forum Moderators: not2easy
Please allow me to paste an example..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head></head>
<body>
<style>
.pandora {
width: 872px;
}
.leftcol {
float: left;
width: 189px;
margin-left: 7px;
border: 1px dashed #000;
}
.content {
width: 680px;
margin-left: 230px;
}
.tablecell {
float:left;width: 100px;border: 1px solid black
}
</style>
<div class="pandora">
<div class='leftcol'>
<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.
</div>
<div class="content">
<div class="tablecell">hi</div>
<div class="tablecell">hi</div>
<br clear="left" />
the stuff after hi
</div>
</div>
</body>
</html>I'm not sure why this is it. The error occurs in Firefox and IE..
What am I doing wrong?
Alan
Any hoo any good?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<style>
/*So I can see whats going on*/
* { border:1px solid red;}
.pandora {
width: 872px; background:green;
}
.leftcol {
float: left;
width: 189px;
margin-left: 7px;
border: 1px dashed #000;
background:red;
}
.content {
/*Removed the width as the width makes it fail in IE*/
/*width: 680px;*/
margin-left: 230px;
background:blue;
}
.tablecell {
float:left;width: 100px;border: 1px solid black; background:tan;
}
/*Adding a right margin to push content down*/
.tablecellend { margin-right:460px; background:orange;}
</style>
<div class="pandora">
<div class='leftcol'>
<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.
</div>
<div class="content">
<div class="tablecell">hi1</div>
<div class="tablecellend">hi2</div>
<!--<br clear="left" />-->
the stuff after hi
</div>
</div>
</body>
</html>
[edited by: SuzyUK at 10:37 am (utc) on June 6, 2008]
[edit reason] fixed smiley in code [/edit]
but thats not the problem.
Nope it's not ;) it's correct behaviour for the clear property.
The clear property tells the element to clear ALL previous floats before it, in this case that includes your left column. it's a side effect of using floats for layout.
there are a few ways to get around it, one is to float everything.. ie. float the .content div too, the clear "all before" only applies if the parent itself is not floated, a floated parent takes responsibility for its own children..
This is probably the easiest way as it also takes care of a few IE bugs along the way (the 3px float jog is evident as is the "margin problem" (IE5.x and IE6 quirks will count it's margin from the right edge of the left float instead of the left edge of the container) - there is a double margin bug in there but that would happen either way so fix is in code below.
You culd use another way (overflow: auto on .content) this would make FF et al act like IE but, you would still have the problem of the 3px jog to go with your margin.
Also your sums don't quite add up - a 680px width content area + a 230px margin means the container needs to be 910px wide (at least, it would need to 913 for IE)
anyway here's the code for the two float method (uses the HTML in your first post.. and appi2 is right about the Doctype, best to go with a strict rendering one.. although this code should work for either..
.pandora {
/*width: 872px;*/
width: 910px; /* = 680 +the 230 margin you wanted */
background: #cfc; /* added to see .pandora stretching */
overflow: hidden; /* make compliant browsers contain the 2 floats */
}
.leftcol {
float: left;
display: inline; /* to cure double margin bug in IE6 */
margin-left: 7px; /* without the disply:inline this would be 14px in IE */
width: 189px;
border: 1px dashed #000;
}
.content {
width: 680px;
background: #fcf;
float: right;
/* no margin required now - .pandoras width takes care of it */
}
.tablecell {
float:left;
width: 100px;
border: 1px solid black;
}
[edited by: SuzyUK at 11:03 am (utc) on June 6, 2008]
As per the math being wrong, I apologise for it, as it was a super rough draft of my current, bloated codes. I will implement the double float styles instead!
Thank you Suzy and Appi2.
Urban
