Been messing with this for a few hours, I can't get the yellow part in the center to be centered and have the yellow border reach the outside. I made a separate CSS div for it: But it's not working. Heres what I want it to look like: Please help!
Something is pushing it out to the left. A quick fix would be to move it back by using a negative margin on the left. Something like #contents { width: 850px; float: left; display: ; margin: 20px 10px 20px [B]-30px[/B]; Code (markup): You'll have to test it in IE6 and IE7 to give those the correct margin.
Negative margin is probably the easiest way to monkeypatch this. If you add "position: relative" to your #contents CSS, the IE6 float double margin bug should go away. If you can get away with position: relative here. That aside, what would have been a better move was not floating the entire #content div to the right. #content doesn't need any float at all, and you could have wrapped the other content that needed left/right padding. (using padding rules, not margin rules) It's a good start, but it could be coded much much tighter. Adding a classname to a div that kills the left-padding, for instance, would probably be a more elegant fix.
I did the suggested "Position: relative" and the negative margins, which fixed it in FF, but it does not look right in IE. The header image doesn't even show up in IE and the there is something wrong with the middle section... any ideas?