Forum Moderators: not2easy
Example scenario:
- Two side-by-side divs inside a 600px wide div
- Left div 200px
- Right div remaining 400px
I want to have a div inside the right div, which is CENTERED INSIDE THE RIGHT DIV. Firefox centers in on the whole 600, but I want it centered in the right 400.
All advice is very appreciated, as I've spent way too much time on this.
Example code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div style="width:600px; background-color:Green;">
<div id="leftDiv" style="width:200px; height:100px; background-color:yellow; float:left"></div>
<div id="rightDiv" style="height:100px;">
<div style="margin-left:auto; margin-right:auto; text-align:center; width:200px; background-color:red;">
In firefox, this 200px box is centered IN THE TOTAL 600px width. I want it centered in the right div. </div>
</div>
</div>
</body>
</html>
All inputs appreciated.
long story short, FF is right, floated divs do not exist width or height wise (IE doesn't always think this), that right div does not know the left even exists, so centering takes placed on the whole width.
fix= add overflow: auto; the right div
overflow: auto; is a 'newer' method of float clearing - and it works for both horizontal and vertical clearing
My first idea was to add a left margin on the rightdiv in order to make sure it doesn't go "under" the left one (it does this, try adding borders and/or background on it wile keeping left transparent. The content is pushed aside by the float, the div itself stays put.
This isn't as illogical is it might sound, esp. not if rightdiv would be longer than leftdiv and need to let it's content go back under the floated element.
I clearly need to play a bit more with overfow.
BTW: I'd recommend a full doctype, keep IE6 out of quirksmode.
I spent about 6 hours going off into tangents researching an anwser. Thanks soooo much.
however I would just like to say that it's thanks to IE (gasp! did I say that) that this situation even evolved.. and it's many thanks to the W3C that a (float spec) compliant solution was given
