Fitting horizontal divs in one row

Hi,

I always run into this problem and don't know the right way to get around it.

I typically have a parent fixed width div and several child divs inside. I'd like them to align them into one row. So I typically, just divide the widths of the children equally to all fit into the parent div. This typically works but, if I then add a right/lift border the last child div moves to the second row.

Is there a smarter way of doing this?

borders are added onto the outside width of an item, so, if you have a div that is 300px wide and you then add a 1 px left and right border, you have now made that div 302px wide.

A good way to do this so it's a bit more friendly then risking if things are one pixel out is to add an inner div tag, then style the outer tag for the full width, and apply any borders or spacing to the inner div. This keeps each area at the correct width, nothing overflows and you're able to set up any margins/padding/borders that you want without risking the layout.

As an example...