I'm just curious as to what some opinions are on using 'wrapper' divs for decorational purposes (background images, borders etc.) and for width and padding purposes (I'll explain in a bit...)
Say you've got two floated left divs #main and #side. If you give them each fluid % widths that add up to 100% (70% and 30%) they will fit next to each other as you would expect. However if you give them padding, say 2% all around on each of them, the #side div will fall below the #main div because there isn't enough room to hold them both next to each other [ (70% + 2% + 2%) + (30% + 2% + 2%) ] = 108%
However, in my experience, if you 'wrap' each of these divs with it's own div #main-wrapper, #side-wrapper and assign the widths (70% and 30% again) and floats (float: left for both) to those wrappers, you can add padding to the divs contained within (those being wrapped) and the layout will not break.
For you visual thinkers...
As you can see above this method uses some extra markup, which is something I'd rather not do, however I've found that using this technique works well across more user agent/OS combos.
<div id="main-wrapper"> <!-- floated left & 70% wide -->
<div id="main"> <!-- 2% padding all around -->
<p>Main Content Div</p>
</div> <!-- end main -->
</div> <!-- end main-wrapper -->
<div id="side-wrapper"> <!-- floated left & 30% wide -->
<div id="side"> <!-- 2% padding all around -->
<p>Side Content Div</p>
</div> <!-- end side -->
</div> <!-- end side-wrapper -->
So any thoughts on this technique? Is there a better way to achieve the same effect without the extra markup that's still as reliable?