Will Merrell schrieb:
Hi all,
This is the same issue that I posted yesterday, but I have posted the file
on a server so people can take a look. Its at
http://coaching-life.com/css/sample.html.
Thank you.
I have checked this for validation
and it passes for the markup and the css. It works the same on Firefox and
IE6. Both have the same problem, if I set the width wider than about 46%,
they wrap. If I set them to 45 or below, I get a large right margin.
Eric already has answered this. An assigned 'width' (and 'height') of a
box refers to the 'content area' of a box only.
please refer to the box model,
http://css-discuss.incutio.com/?page=BoxModel
1): not wrapping:
form width: 1000px
fieldset width = 49% * 1000px = 490px
default border: 2px, left + right: 4px
padding: 0.1em
= 1.6px (depending on the text zoom),
= rounded: 2px
left+right padding: 4px
Sum: 490px + 4px + 4px = 498px
2) wrapping:
Screen: 500px
49% * 500px = 245px
+ 4px border
+ 4px padding
Sum: 253px
The problem is, that you are adding static values (border, padding) to
the percentage value of the width, according to the box model.
The static part becomes, seen relatively, bigger when the screen is
sized smaller. This cannot work when you choose a tight fit.
Another problem is the rounding. Even when you could define all lenghts
in percentages (for the border, you can't), the rounding would
eventually add a pixel for each single lenght at worst.
Last, but not least, in IE6, if you define percentages for margins, you
get into problems, and if you define percentages for paddings, you get
into real trouble.
Better forget px-perfect designs. Float the one object left, the other
right, and leave enough space in between.
Ingo
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
