Float and padding

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_ (AT) _tele2 (DOT) fr
==================

Remi Villatel <maxilys (AT) SPAMCOP_tele2 (DOT) fr> wrote:

div.halfleft {
float: left;
left: 0;
width: 50%;
padding: 0 4px 0 0;
}

The "left" box offset property only works on positioned elements. It
appears that you are new to CSS, check out the box model:
http://www.w3.org/TR/CSS21/box.html
Note that padding is added to a specified width, 50% + 4px thus ends up
larger than 50%.

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.

You also need to read up on the phenomena called doctype switching and
quirks vs standards mode, Google for it. Making sure that browsers run
in standard compliant mode will make Opera do the right thing as well
and display the divs beneath one another.

--
Spartanicus

Spartanicus wrote:

div.halfleft {
float: left;
left: 0;
width: 50%;
padding: 0 4px 0 0;
}

The "left" box offset property only works on positioned elements. It
appears that you are new to CSS, check out the box model:
http://www.w3.org/TR/CSS21/box.html

Thank you but I have the W3C archive on CSS as bedside book... well,
screenside book. I'm not a newbie since I can write CSS from the top of
my head. As for the "left: 0" statement, probably I wrote it when I was
a newbie but the W3C CSS validator doesn't even complain so it has
remained untouched. It has no effect, why bother? Even my sense of CSS
aesthetic isn't affected...

Note that padding is added to a specified width, 50% + 4px thus ends up
larger than 50%.

Well, I was looking for some apparently non-existant solution against
this behavior. Let's call this a misconception and I'll use my "patch"
i.e. another nested <div> without any defined width but with the padding
I'd like to apply to its parent <div>. (Grumble, stupid CSS, grumble.)

Waiting for CSS 3,

--
==================
Remi Villatel
maxilys_ (AT) _tele2 (DOT) fr
==================