Forum Moderators: not2easy
Here is the code for the two columns, with #side as the left and #chunk as the right.
#side
{
float: left;
margin: 0px 0px 0px 5px;
padding: -5px 5px 0px 0px;
width: 143px;
}
#chunk {
text-align: center;
padding: 0px 10px 10px 10px;
margin: 20px 20px 0px 165px;
border-width: 1px;
border-color: #3399FF;
border-style: solid;
background-color: #FFFFCC;
border-collapse: collapse;
}
apologies for missing this for so long.. I'm only recently beginning to see the benefits of using floats to contain floats (aside from stretching divs) this is one case where it will work to do what you want.
Simply wrap a 100% wide floated div around the entire layout and you should be able to achieve it fairly well..
<style type="text/css" media="screen">
#wrapper {
float: left;
width: 100%;
background: #eee;
}#side
{
border: 1px solid #000;
float: left;
margin: 0px 0px 0px 5px;
padding: 5px 5px 0px 0px;
width: 143px;
}#chunk {
text-align: center;
padding: 0px 10px 10px 10px;
margin: 100px 20px 0px 165px;
border-width: 1px;
border-color: #3399FF;
border-style: solid;
background-color: #FFFFCC;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="side">side text</div>
<div id="chunk">chunky text</div>
</div>
I don't know why yet?
Suzy
I don't know why yet?
From the W3 Specs [w3.org]...
Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
By putting #chunk inside of a floated container, it forces the margins not to collapse. Which would also explain why ajnorris was able to make this scheme work in reverse; the left div is floated and therefor does not collapse it's margins.
The question, then, is exactly what margin was collapsing with those of #chunk...
Could it be collapsing margins?
Yep that's what I was thinking too but never tested it..
~ * {padding: 1px;}
I think you're absolutely right and in my code it's actually collapsing with the default body margin (because I haven't zero'd it} ..
I was thrown by IE getting it "right", but of course it's float model is different and the "chunk" element is not actually 100% wide (like it should be)
So what's happening in compliant browsers is that the 100% wide "chunk" element's margin has collapsed to it's parent element (body in my case) so the float is being affected by the body margin too..
IE on the other hand.. well it's side and chunk elements are not overlapping so they're doing their own thing anyway.
So in this case 1px top padding on the parent element will also fix it..
Thanks cEM.
Suzy
