Hi there,
I have following CSS definitions:
div.limits { margin: 0 20px 0 20px; }
div.halfleft {
float: left;
left: 0;
width: 50%;
padding: 0 4px 0 0;
}
div.halfright {
float: right;
right: 0;
width: 50%;
padding: 0 0 0 4px;
}
..hide {
clear: both;
display: block;
visibility: hidden;
margin: 0;
padding: 0;
}
I use them this way:
<div class="limits">
<div class="halfleft">
<table ...
</table>
</div><!--/halfleft-->
<div class="halfright">
<table ...
</table>
</div><!--/halfright-->
<hr class="hide">
</div><!--/limits-->
I tried with Konqueror, Opera, Mozilla and Firefox. It works as expected
only in Opera. Everywhere else the two tables which should be side by
side with a fixed space of 8px in between are instead, the tables on the
left and on the right but the one under the other.
I tried various display properties and I found that "display: table"
works in Konqueror. Alas Mozilla and Firefox still didn't understand
what I want.
My way around was to remove the padding from "halfleft" and "halfright"
and to apply it to nested divs.
<div class="limits">
<div class="halfleft" style="padding: 0">
<div style="padding-right: 4px">
<table ...
</table>
</div>
</div><!--/halfleft-->
<div class="halfright" style="padding: 0">
<div style="padding-right: 4px">
<table ...
</table>
</div>
</div><!--/halfright-->
<hr class="hide">
</div><!--/limits-->
(That's what I call patching!) ;-)
It works everywhere but I can't help thinking "That's stupid". I use
floating divs with paddings and margins everywhere and this is the only
place where it doesn't work as it should.
The question is: Is there a way to prevent a div from adding the width
of the padding to its own defined width?
I made some tests and I discovered that the problem occurs whatever the
width of the content of the div. So I guess it's a div width problem.
Have mercy for my page that I'm about to burn... virtually. ;-)
--
==================
Remi Villatel
maxilys_@_tele2.fr
==================