My Two Column Box Model Test

[Thehappyhack]

I am going to leave this up for a few weeks. This is a very simple two column test that, using CSS, I was able to make display "properly" in both Firefox and IE7. It illustrated for me how the different browsers handle box widths. If there's a better way, I am all ears. Here are the boxes:

http://www.stcmedical.com/twocolumntest/

My goals were as follows:

1) Two columns with a header
2) Jello layout, centered on page
3) Keep the two columns at 200px width each
4) 2px borders all around

Here's the CSS for W3C compliant browsers:

#allcontent {
width: 406px;
margin-left: auto;
margin-right: auto;
}

#header {
width: 402px;
height: 100px;
border-style: solid;
border-width: 2px;
}

#main {
width: 200px;
height: 200px;
border-style: solid;
border-width: 2px;
}

#sidebar {
width: 200px;
height: 200px;
border-style: solid;
border-width: 2px;
float: right;
}

And here is for IE7:

#allcontent {
width: 408px;
}

#header {
width: 404px;
}

#main {
width: 200px;
border-width: 2px;
}

#sidebar {
width: 200px;
border-width: 2px;
}

What are the proper conclusions as to how different browsers handle column width?

[Thehappyhack]

After experimenting by making the border styles dotted, I figured it out.

Firefox collapses the middle borders, IE7 does not. So for a 2px border, IE7 needs 2px added to the entire width to properly display the columns.

A quick recap...

First, keep in mind that no padding or margins are specified anywhere.

Explorer: To hold two 200px columns with 2px borders, the allcontent div needs a width of 408px. 2px each for the inside and outside borders, accounting for an additional 8px of space. If you extend the main column by just one pixel, it carries to the next line. They don't collapse. The header column that sits on top of the two columns needs a width of 404px. Specifying 404px here is really specifying 408px, with the implicit addition of the outside borders of 2px each.

Firefox: To hold two 200px columns with 2px borders, the allcontent div needs a width of 406px. 2px each for the inside and outside borders and just 2px for the inside borders because they collapse, accounting for an additional 6px of space. Therefore, the header column on top only needs 402px, with the same implicit addition of 4px (2+2) for the outside borders.

I also tested with Google Chrome and Safari, and they behave just as Firefox does.

I hope this helps other beginners like me...

Greg

[Dasher]

One of the things that bugs me about IE is the width of boxes within a sidebar I have a page with 9 div's in the left side bar, they are supposed to be 180px wide, and in FF they are but in IE they are all over the map. I suppose the clean method would be to use two different css pages based on user agent, but that really bugs me :-)