1337Mac
msg:3879933 | 7:38 am on Mar 27, 2009 (gmt 0) |
Update: the problem was the padding I applied to the #content div. But I don't understand why. It should have padded the div equally from all directions, not moved it off-center.
|
1337Mac
msg:3879935 | 7:46 am on Mar 27, 2009 (gmt 0) |
In short, this is still a problem for me, since it seems I have no way of adding padding to the left or right sides of my #content div without it breaking the centering.
|
1337Mac
msg:3879937 | 7:56 am on Mar 27, 2009 (gmt 0) |
OK, I figured it out. It factors in the padding when centering. To compensate for the 12px of padding I added 12px to the left margin.
So now instead of -468px it is -480px. Yay. Case solved.
|
swa66
msg:3880007 | 10:37 am on Mar 27, 2009 (gmt 0) |
There is another way to center absolutely position block elements:
.widget {
position: absolute;
padding: 12px;
width: 936px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
|
|
Unfortunately legacy IE versions have trouble with it, but it you use scripted help to fix their issues somewhat it can work there too (e.g. IE7.js fixes it)
|
SuzyUK
msg:3885558 | 9:14 pm on Apr 4, 2009 (gmt 0) |
| OK, I figured it out. It factors in the padding when centering. To compensate for the 12px of padding I added 12px to the left margin.
So now instead of -468px it is -480px. Yay. Case solved. |
|
Congrats!.
you're not compensating, it's the Box Model (CSS101!)
actual width = content width + padding + borders You figured it out, as you said :) The margin auto method (swa's post) will work going forward too. When left and right co-ordinates are both supported together in IE, all will be well, until then it's box model basics ;)
|
|
