Fri, 2010-08-20 16:17
Hello everyone, I would like to have a fixed width of 950 px for my website, but also want to include padding. I am making a layout but I don't want to calculate the width of all columns/sections from the layout. I actually just did that but I was wondering if there is an easier way?
Thanks SO much.
Source:
* { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #header { color: #333; width: 930px; float: left; padding: 10px; border: 0px solid #000; height: 100px; margin: 0px 0px 0px 0px; background: #BD9C8C; } #leftcolumn { color: #333; border: 0px solid #000; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width:356px; float: left; } #content { float: left; color: #333; border: 0px solid #000; background: #F2F2E6; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 356px; display: inline; } #rightcolumn { color: #333; border: 0px solid #000; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 178px; float: left; } #footer { width: 930px; clear: both; color: #333; border: 0px solid #000; background: #BD9C8C; margin: 0px 0px 0px 0px; padding: 10px; }
Fri, 2010-08-20 17:29
#1
No. Padding is defined in
No. Padding is defined in the CSS specificaton as adding to the width of an element, period. No exceptions for browsers that follow the specification.
Fri, 2010-08-20 19:31
#2
Is there a better way of
Is there a better way of doing it then? Since I don't want the text to be right next to the broder.
Fri, 2010-08-20 20:03
#3
oezil wrote: Is there a
Is there a better way of doing it then? Since I don't want the text to be right next to the broder.
Without seeing the page I could not say. I am personally opposed to fixed width pages and have little experience with them. If you are trying to create and absolutely pixel perfect layout that will look the same in all browsers you are, in my opinion, tilting at windmills.
Our site posting guidelines ask posters to give either a link to the problem page (best) or failing that to enclose ALL the code withing CODE tags. But you have only shown your CSS which without the corresponding html is pretty well useless.
Sat, 2010-08-21 04:30
#4
If you want (for example)
If you want (for example) 20px padding either side then width = 910px + padding-left = 20px + padding-right = 20px = 950px total width. So in other words, just deduct the combined horizontal padding from your total width to work out the CSS width.