Eiolon Posted December 27, 2011 Share Posted December 27, 2011 I have a DIV that is 900px wide and padding at 12px. I have a table that goes below it (for data) that is set for 900px wide and padding at 12px. However, the DIV is actually 24 pixels wider than the table. Shouldn't they be the same width? Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted December 27, 2011 Share Posted December 27, 2011 Your table is making the main div wider. Total width is margin + border + padding + width So your table should be about 888px wide and have a padding of 12px for a div 900px width. or have table that's 900px with no padding. How are you giving your table padding? Quote Link to comment Share on other sites More sharing options...
Eiolon Posted December 27, 2011 Author Share Posted December 27, 2011 Here is my CSS: div.header { width:900px; background-color:#363E44; padding:12px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#FFFFFF; font-weight:bold; } table.data { width:900px; padding:12px; border-collapse:collapse; } table.data th { background-color:#EEEEEE; padding:12px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#000000; } table.data td { background-color:#FFFFFF; padding:12px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000 } Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted December 27, 2011 Share Posted December 27, 2011 I did the math wrong Total width is margin + border + padding + width + padding + border + margin So your table is 0 + 0 + 12 + 900 + 12 + 0 + 0 pixals wide for a total of 924pxs wide and it's forcing your 900px div to be 24pxs to wide Quote Link to comment Share on other sites More sharing options...
Eiolon Posted December 27, 2011 Author Share Posted December 27, 2011 The table is not inside the div. The div is above it. They are completely separate elements. Also, it is the table that is showing the correct 900px whereas the div is showing 924px. Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted December 27, 2011 Share Posted December 27, 2011 The table is not inside the div. The div is above it. They are completely separate elements. Sorry I read that but forgot about it when I was pondering the problem. I would think they should be the same width, 924pixals. Do you have firefire foxes firebug or can you use chrome to see if something else is a problem? Quote Link to comment Share on other sites More sharing options...
sunfighter Posted December 27, 2011 Share Posted December 27, 2011 The table has nothing to do with it. The box model says the total width of a box object is the width + right padding + left padding + right border + left border + right margin + left margin. To see it in your example kill the table and add a second div. Just duplicate the css for the second one, but make back ground color different and remove the padding. <style type="text/css"> div.header { width:900px; background-color:#363E44; padding:12px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#FFFFFF; font-weight:bold; } div.foot { width:900px; background-color:pink; //padding:12px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#FFFFFF; font-weight:bold; } </style> </head> <body> <div class="header"> some thing here </div> <div class="foot"> some thing there </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.