Two DIVs by Percentage

How to deal with Padding

[phoenix2k]

Hi everyone, I'm sort of new to designing websites. (The last time I did it, Macromedia Flash was very new.) I'm trying to do something that seems very simple but somehow is not.

To simply the situation, let's just say I want to make a webpage divided into two DIVs that fill up the width of the browser. I wish to make these two DIVs proportional: the left one 80%, and the right one 20%.

So far so good.

Now I want to add a 10px padding/border/margin of some sort, but since ALL of them are calculated in excess of the content width, the two DIVs now no longer appear next to each other.

This is really frustrating; do I need to make another DIV inside the DIVs I already have in order to achieve a simple padding/border/margin? This seems highly inefficient.

By the way, why not rename padding/border/margin to margin1/margin2/margin3 since they're all the same damn thing anyway? I thought there was no way the people that standardized this stuff would make boxes function like this; imagine my surprise when I found out otherwise.

Anyway, if I could get some help, I would greatly appreciate it.

[CSS_Kidd]

I just find it to be easier and quicker to insert another div and give it the padding and borders and all. I have tried before to figure out what the padding percentage may be so I can subtract that from the width of the div. It just gave me a headache. Besides it would look different with different screen resolutions.

[swa66]

From a standards view it's also easy to select all direct children and give them a margin

Something like:

<div class="foo">
 <h1>heading</h1>
 <p>paragraph</p>
 <ul>
  <li>unordered</li>
  <li>list</li>
 </ul>
</div>

.foo {
 width: 80%;
}
.foo>* {
 margin-left: 10px;
 margin-right: 10px;
}

But alas IE6 is still out there and nobody cared to fix it's lack of support for the direct child selector. Well that is except the folks behind IE7.js .