Forum Moderators: not2easy
CSS:
div.Container {
width: 100%;
height: 35px;
}
div.FixedLeft {
float: left;
width: 60px;
height: 35px;
border: 2px groove;
}
div.FluidRight {
width: 100%;
height: 35px;
border: 2px groove;
}
HTML:
<div class="Container">
<div class="FixedLeft">
fixed left
</div>
<div class="FluidRight">
fluid right
</div>
</div>
In IE6, there's a small gap between the two divs which I can't get rid of by setting margins to 0. In Opera, the right div drops below the left one. In Mozilla, this all works ok.
Problem 2 - similar: floating a fixed width column to the right, with the left column taking up the remainer of the page width, all in a container div.
CSS:
div.OverallContainer {
position: absolute;
left: 0px;
top: 116px;
width: 100%;
z-index: 2;
}
div.LeftColumnContainer {
margin-left: 48px;
width: 100%;
}
div.RightColumnContainer {
float: right;
width: 150px;
height: 400px;
}
HTML:
<div class="OverallContainer">
<div class="RightColumnContainer">
right column container
</div>
<div class="LeftColumnContainer">
left column container
</div>
</div>
In IE6 this works ok. In Opera, the left column drops below the floated right column. In Mozilla, the left column drops behind the floated right column.
In both cases, the content of the fluid div is dynamic, so I can't fix widths. Any ideas gratefully received. :)
*{
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Make Opera and Moz. draw elements using the same box model as IE. By default Moz. doesn't count border / padding / margins when it determines width so you actually have w + b + p + m = w. not sure what Opera does by default. IE counts everything in width (w = w). This rule above make Opera and Moz. act the way IE does. That way you can fix it in one and (in theory) the others will look the same.
Jordan
Try using left and right padding on the layer that is to fill the remaining space equal to the width of the floated layer.
If you are specifying a 100% width, and you add a margin of 10%, for example, the width is then going to be 110% - horizontal scrolling!
Well you get horizontal scrolling in Mozilla, because it interprets the CSS as it should. You don't in Opera because it shifts the 100% width div down to the next line. IE interprets 100% width as 100% of the remaining space after any adjacent divs, so again no horizontal scrolling.
In tables, if you have two cells in a row and you set one to fixed and the other one to percentage, the fixed one is dealt with as first priority and the percentage one as second priority. Is there an equivalent in non-table CSS? That would solve my second problem.
MonkeeSage - maybe I've interpreted your post incorrectly. I've tried just inserting that code into the external CSS file but it makes no difference to the display in Opera and Mozilla. Do I need to do something else as well?
