Hi Guys,
<br />
I am currently working on a project (viewable at <a href=“http://www.icreateinc.org/index.html”>www.icreateinc.org</a>, and I am trying to get the boxes underneath the flash image (both the red box and the grey box) in equal alignment of the flash image, being directly underneath it, but having an good amount of space between the red and grey boxes. I constantly tried many times to make this work, but when I do, I am constantly getting different results on different browsers. The red box is shortened and postiioned more to the left, without having the same amount of space I assigned it to have (which is reflected in the Safari image). The grey box is shifted towards the left in Safari and Firefox, it refuses to make space at it’s bottom (to make it have more “breathing room” and the only positive is that it sits equally in Internet Explorer.
<br />
I have no clue as to why this is not working, and I was wondering if anyone else has encountered this problem, and if their are any solutions to this? Thanks for any help given, I greatly appreciate it!!!

<br />
<b>Safari</b><img src=“http://www.icreateinc.org/images/safari.png”>
<br/>
<br />
<b>Internet Explorer</b><img src=“http://www.icreateinc.org/images/ie.png”>
<br/>
<br />
<b>Firefox</b><img src=“http://www.icreateinc.org/images/ffx.png”>

my firefox is giving a totally different rendering than the screenshots.

First thing first you need to nest your columns in a wrapper much like you are doing with the header.
Second you then need to set your left and right columns to not exceed the width of your wrapper.
Third you should then set your left hand column boxes to the width of the left column.

That won't solve all of your problems but it should get you going in the right direction.