Hi there,
I've been reading quite a bit about the various IE box model &
float-related work-arounds, but I haven't encountered anything yet to
my knowledge that addresses or explains the issue that I'm seeing
with IE6/7 (thankfully, IE5.x is old enough to be out of the picture
for this project).
Basically, my intention is to create dynamic widths, evenly divided
amongst several columns totalling up to 100% of the containing div
(yes, this is more or less doable with tables, but I'm trying to
determine why this is so troublesome with divs). Here's the simplest
example I could think of:
...
<div id="x">
<div id="x_1">part1</div>
<div id="x_2">part2</div>
</div>
...
http://emparq.com/scratch/test1.html
Note that:
- the width of parent div is unspecified (to allow resizing)
- each child div (containing the text 'part1' and 'part2')
* gets 50% of the width (thus totalling 100%)
* floated to the left
...when resizing the browser window in IE6/7, sometimes 'part 2' will
apparently exceed the container width, and spill over into the next
row (placed under 'part 1'). This looks like something float or
box-model-related, as quirks-mode doesn't seem to suffer this problem:
(note: only the DOCTYPE directive was removed)
http://emparq.com/scratch/test0.html
...and while that's all well and good, quirks-mode isn't really a
viable option. Moving on, I tried removing the 'width' and 'float' css
properties from the 2nd child div (the one containing the text
'part2') to let it consume the remainder of the parent's width:
http://emparq.com/scratch/test2.html
...which does succeed at rendering how I wanted. But really, what I'm
trying to understand is why floated divs with widths totalling up to
100% causes spillover? And is there a way to prevent that (perhaps
using some obscure combination of css properties?), while leaving the
'float' and 'width' properties intact?
Some other attempts: (that didn't correct the behavior):
- setting 'overflow:visible'
- setting 'margin', 'padding', and 'border' to 0 on child divs
- 'zoom:1' (I don't think 'hasLayout' should be an issue anyways,
since I'm already using width?)
Could anyone help enlighten me on what's going on with this behavior,
and if there's a better approach to
evenly-divided-yet-dynamically-resizing-width divs than what I've got
in 'test2.html'?
Thanks.
--Mike
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
