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.

IE 6 and 7

I made a quick and simple decision which has already helped lift a weight off my shoulders. I have decided from this day on forward I will refuse to make my websites look and function right in IE 6 and IE 7. Dean Edwards has created a JavaScript that will attempt to fix IE 6 as much as humanly possible, forcing it to render everything correctly. It used to be known as IE 7, but he has recently released his latest version IE9.js which attempts to fix even some flaws that IE 8 has, while I am not yet ready to drop support for IE 8, I have enabled the latest and greatest version of this JavaScript so on any IE less than 9 the JavaScript will run.

To see everything that IE9.js supports visit the IE7.js Test Pages list and take your pick. The work that Dean has done is absolutely amazing and I am very happy that because of him I don't really have to worry about my websites in older versions of non-standards compliant browsers.

Even Microsoft sent flowers to the fake IE6 funeral with a note saying that we should stay tuned till this years upcoming MIX conference. I hope they say they are support HTML 5 and CSS 3 as that would be simply amazing. Maybe, just maybe they are switching from the old Trident based rendering engine to something more modern.

While I may dislike IE 6 and 7, I won't yet go so far as to put up a message just yet stating that people should get a better browser, I am removing a lot of stress and work in that I no longer have to support the old ageing browser.