Properly Add Padding to Child DIVs

[billatl]

Hello,

Having a little problem with the Box Model. I'm trying to add padding to a number child DIVs of a parent DIV. I'm building an app that dynamically adds a columns widget onto a page based on an end-user's selections (2-5 columns).

<div style="display:block; width:100%; margin:7px 0;">
    <div style="padding:5px; float:left; width:20%;">col1</div>
    <div style="padding:5px; float:left; width:20%;">col2</div>
    <div style="padding:5px; float:left; width:20%;">col3</div>
    <div style="padding:5px; float:left; width:20%;">col4</div>
    <div style="padding:5px; float:left; width:20%;">col5</div>
</div>

The problem with this code is the padding is being added to the width causing the last column to fall to the next line. In addition, I will not know the width of the page/parent DIV nor the number of columns - so it seems I'm stuck with percentages.

I'd really hate to resort to using Tables, but the solution needs to work in IE7 and above.

Thoughts?

[Lerura]

you could lower the width and use percentage for the padding as well.
e.g.

<div style="padding:0.5%; float:left; width:19%;">col1</div>

you can you this formula ( 100 / number of columns ) - 1.1 to find the width in percentages for the divs.

I suggest 1.1, as the sum of the rounded calculated values in pixels may exceed 100%, if you only substract the exact padding which in this case is 1%