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? Link to comment https://forums.phpfreaks.com/topic/253911-padding-is-different-on-div-vs-table/ 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? Link to comment https://forums.phpfreaks.com/topic/253911-padding-is-different-on-div-vs-table/#findComment-1301676 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 } Link to comment https://forums.phpfreaks.com/topic/253911-padding-is-different-on-div-vs-table/#findComment-1301686 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 Link to comment https://forums.phpfreaks.com/topic/253911-padding-is-different-on-div-vs-table/#findComment-1301688 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. Link to comment https://forums.phpfreaks.com/topic/253911-padding-is-different-on-div-vs-table/#findComment-1301696 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? Link to comment https://forums.phpfreaks.com/topic/253911-padding-is-different-on-div-vs-table/#findComment-1301708 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> Link to comment https://forums.phpfreaks.com/topic/253911-padding-is-different-on-div-vs-table/#findComment-1301710 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.