CSS 3 needs to be adopted now

This is a simple error that I ran into the past couple of days. I was not aware that the width of an item was calculated as follows:

left border width + left margin + left padding + width + right padding + right margin + right border width.

Well, that off course does not work well when you want to float two items next to each other with the following:

#cont1 { float: left; width: 75%; border: 1px solid black; }
#cont2 { float: right; width: 25%; border: 0; }

These will not float next to each other since #cont1 is bigger than 75% meaning that the other one being 25% gets pushed beneath it.

CSS3 fixes this with the box-sizing: border-box;, this property will make it so that all of the padding, margins and borders are calculated within the allocated width, that means a width of 75% means the entire element will be 75% and everything else will be calculated within it.

You can use it now with the following snippet:

box-sizing: border-box;

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

However IE won't render the boxes correctly, nor will older versions of Safari, Chrome, or FireFox. Until CSS3 is ratified and starts being accepted by all major browsers without the browsers specific keywords it is not really that useful. In my case I have reverted to the alternate version of using a wrapper element that wraps around the element, and doesn't have margin, padding and a border.

#cont1wrap { float: left; width: 75%; border: 0; margin: 0; padding: 0; }
#cont1 { border: 1px solid black; }
#cont2wrap { float: right; width: 25%; border: 0; margin: 0; padding: 0; }
#cont2 { padding: 10px; border: 0; }

It does mean that you need twice the amount of tags in HTML, one with an id of #cont1wrap and another inside of that with an id of #cont1, same with #cont2. Not an ideal solution but until CSS3 is made the new king of layout it is the only choice we have that is mostly compliant with most browsers.