DIV and TABLE widths not rendering properly using CSS

Question

With this html:

<div class="sectionheading">User Information</div>  
<table id="UserInputTable" class="xInputTable">

...and this CSS:

.sectionheading{width:100%; font-size:20px; font-weight:bold; background-color:#28BA87; color:white; text-align:center; border-style:solid; border-width:thin; border-color:Black; border-collapse:separate; overflow:hidden}

.xInputTable {text-align:left; 
                  vertical-align:middle; 
                  margin: 0px 0px 0px 0px;
                  padding: 0px 0px 0px 0px;
                  border-collapse:separate;
                  overflow:hidden}
table.xInputTable {width:100%; border: solid thin red; border-top-style:none;}

The DIV ends up rendering 2 pixels wider in both IE and Firefox (the left borders line up perfectly, the right borders are off by two pixels). Using the IE web dev toolbar, both elements have a width of 100%. In Firebug, they have widths of 950px and 948px. Here is the computed CSS (from IE developer toolbar):

DIV

BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid black;
WIDTH: 100%;
FONT-SIZE: 300;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
BORDER-LEFT: thin solid black;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid black;
BORDER-TOP: thin solid black;
BACKGROUND: #28ba87;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
LINE-HEIGHT: 1.5;
BACKGROUND-COLOR: #28ba87;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
TEXT-ALIGN: center;
COLOR: white;
FONT-WEIGHT: 700;
MARGIN: 0px;
PADDING-BOTTOM: 0px;

TABLE

BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid red;
WIDTH: 100%;
FONT-SIZE: 180;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
HEIGHT: auto;
BORDER-LEFT: thin solid red;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid red;
BACKGROUND: white;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
BACKGROUND-COLOR: white;
LINE-HEIGHT: normal;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 0px;
COLOR: #222;
TEXT-ALIGN: left;
MARGIN: 0px;
PADDING-BOTTOM: 0px;

Any idea what concept I'm missing here?

Answer 1

Wild guess here, but tables by default have cellpadding or cellspacing (can't remember which one) set to 2px by default, unless you set border-collapse: collapse;.

This doesn't affect the table itself, but the td's inside the table.

If my guess is correct, either of the following should work:

• Set border-collapse: collapse; in the css for the table
• Put "cellpadding="0" cellspacing="0" in the ` tag
• Add a new CSS declaration table.xInputTable td { padding:0; margin:0; }

Answer 2

Could be the 2 pixels for each (left and right) border which aren't taken into account when calculating the width.

Answer 3

Try to not set the width specifically on the div (and maybe the table too). They default to 100% but get calculated slightly different when it's set, I believe.

Answer 4

pb is correct.

When you apply "border" to a table, it will adjust the width to accommodate for the border. DIVs will add the border in addition to the width (as will most elements with a specified width, tables are special).

Hurix is correct that there is no point in adding width 100% to the div since it is a block element and will take up the full width of the parent by default, so you can take it off and it will auto-size to stay inside the parent even with the border added to its width. The table, however, should get the width: 100% if you want it to be full width.

Answer 5

Borders act like padding, so you are adding 2px to your width => 100% + 2px

Also consider using meyers reset.css to make sure your on level ground before jumping in. http://meyerweb.com/eric/tools/css/reset/

Also you are getting sorta crazy with the all caps thing.

Answer 6

Following up on kmiyashiro and pb I wanted to add that if you wrapped your table in a div with the style "width:100%; border: solid thin red; border-top-style:none;" and changed the style on "table.xInputTable" to "width: 100%" then everything should line up.

Answer 7

Ok so, in my opinion, at this point I would roll all the way back to just the html. Use FireBug religiously and only add one CSS attribute at a time to be sure that it doesn't have a negative effect on the layout.

Unfortunately the nature of CSS is that it is full of exceptions and things to consider with inheritance. Starting with just a reset.css, and maybe making all your different major elements a different background color (because that wont change the size like border) can help you see where you elements ACTUALLY reside.