Forum Moderators: not2easy
I can't seem to get the left and right columns to stay within the containing DIV I have.
Here's the CSS:
body
{
font-family: arial, helvetica, sans-serif;
background-color: #f7f7f7;
margin: 0;
}
#container
{
width: 900px;
margin: 30px 20px 50px;
border: solid 10px #5e82a4;
}
#left
{
width: 400px;
height: auto;
float: left;
border: solid 1px #f27034;
}
#right
{
width: 496px;
height: auto;
float: right;
border: solid 1px #dc337b;
}
and the Source Code:
<div id="container">
<div id="left">
a<br>
A<br>
A<br>
A<br>
</div>
<div id="right">
b<br>
B<br>
B<br>
B<br>
B<br>
B<br>
</div>
</div>
I'm convinced it's something incredibly simply but at the moment I can't figure out what.
Any help would be very much appreciated.
fom the code that you have posted it is hard to tell whether you have used a full DOCTYPE or not.
It's use is imperative if problems are to be resolved.
This code has been tested in IE6, IE7, Opera, Safari and Firefox...
<!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">
body {
font-family:arial,helvetica, sans-serif;
background-color:#f7f7f7;
margin:0;
}
#container{
width:900px;
margin:30px 20px 50px;
border:10px solid #5e82a4;
}
#container:after {
content:'';
display:block;
clear:both;
}
#left{
width:400px;
height:auto;
float:left;
border:1px solid #f27034;
}
#right{
width:496px;
height:auto;
float:left;
border:1px solid #dc337b;
}
</style></head>
<body><div id="container">
<div id="left">
a<br>A<br>
A<br>A<br>
</div>
<div id="right">
b<br>B<br>B<br>
B<br>B<br>B<br>
</div>
</div></body>
</html>
birdbrain
Just with regards to you testing on IE6 and 7 - can you tell me how you do this? I'm working on a Mac using Parallels to test for the PC but currently only have IE6 - If I upgrade to 7 then I'll lose the older version?!
I do not know if anything is possible for Mac users, but for PC use do a google search for multiple versions of IE
With regard to :after, you can find relevant information here...
[positioniseverything.net ]
IE6 and 7 do not recognize :after but, fortunately, incorrectly clear floats regardless. ;)
birdbrain
I'm working on a Mac using Parallels to test for the PC but currently only have IE6 - If I upgrade to 7 then I'll lose the older version?!
One of them is that often you see it promoting hacks, with IE8 on the horizon that's an even worse bet to take than it was back then. If you need anything for IE6 and 7, do it in a conditional comment.
Another one is that sometimes it causes the page itself to stretch in some browsers (and e.g. in FF3 I can't make it shrink again).
e.g.: [webmasterworld.com...]
As to the clearing being OK in IE: you might find you need to give in IE the "hasLayout" property (using e.g. "zoom:1") for it to behave wrongly and have the parent encompass it's floated children.
Another way (less purist, but simpler to understand in many cases) is to add something that is in the flow (i.e. not floated) and give that the clear property. A <br> is typically used for it.
[edited by: swa66 at 7:41 pm (utc) on Nov. 21, 2008]
