I am just doing a simple thing by making a wrapper DIV in order to center it in the body. I want the wrapper DIV background to be a certain color and the body backgound color to be another. It works in IE but in Firefox and Safari it doesn't take effect. body { margin: 0; padding: 0; background-color: #19290F; } #Wrapper{ width:850px; top: 25px; position:relative; margin-left: auto; margin-right:auto; background-color:#D1D8BE; } Help! Thanks!
Try this simpler version; body { margin:0; padding:0; background:#19290F; text-align:center; } #wrapper { width:850px; margin:0 auto; text-align:left; background:#D1D8BE; } I noticed you tried to give the wrapper a 25px space from the top of the screen. Instead, just use a top margin for it... (my method below) #wrapper { width:850px; margin:25px auto 0 auto; text-align:left; background:#D1D8BE; }
ninedesign hit it on the money to an extent... using position:relative for a top level element instead of using margins and/or padding is just asking for a layout to fail at some point. Honestly, I'd probably null all margins and padding first with the universal selector - additionally here's some comments to explain a couple lines Nines used that 'need' explaining. * { /* null margins and paddings on ALL elements to give us a nice even baseline. */ margin:0; padding:0; } body { background:#19290F; /* center the #wrapper in IE 5.x */ text-align:center; } #Wrapper{ width:850px; margin:25px auto 0; background:#D1D8BE; /* return to normal text-align after centering this container in IE 5.x */ text-align:left; } Code (markup): IE 5.x (and IE6 in quirks mode) ignores margin:auto, so you have to set text-align:center; which (incorrectly) centers #wrapper under the IE box model.
I am still having a bit of trouble putting the background color on the DIV "wrapper" which holds three DIVS, two columns and a footer. I can put background color on each of these and it works but I still would like the default color to be #D1D8BE for the entire DIV. A related question: On my first column which happens to be navigation I would like to have a specific background color but it only covers the area I have content so the desired color band along the side only goes down a little bit. Is there a way to get the color down the whole page? Thanks!
Ok, what's probably happening to your wrapper is it's not expanding to contain the height of the floats inside it. This is one of the behaviors that's the hardest to understand, though relatively simple to fix. Basically floating an object removes it from the 'normal' automatic height calculations for any containers around it... so your colored div is not 'stretching' to the full height. The easiest fix is to set the wrapper to either overflow:auto; overflow:hidden; or float it left or right - when any of those states are set and no height is declared on the wrapper, the DIV will obey the height of floats inside it. The 'older' solution is to put a DIV inside the wrapper after your columns that 'clears' the floats... Usually if going that route I try to use the page footer for this - though that's not always an option... Just avoid the empty 'clearing' div or 'clearfix' nonsense you'll see on some pages on the subject - those are a complete waste of code. At least, that's my guess - if you post a full copy of your current code I'm sure one of us can point you at what you need. I'm guessing float behavior on this because it's the most common cause of what you describe, and one of the trickier points of the box model to understand.
A related question: On my first column which happens to be navigation I would like to have a specific background color but it only covers the area I have content so the desired color band along the side only goes down a little bit. Is there a way to get the color down the whole page? If floated elements are contained by a wrapper <div> then u can give that <div> a 1px tall bg repeat-y that has the menu's color on the left and the main content's color on the right. It always will be as tall as the tallest floated element. Sorry about my english. If someone knows what I'm talking about please translate it to plain english.
I believe you are referring to what's commonly called 'faux columns' Because DIV based columns cannot 'stretch' automatically to all be the same height, to style each of the columns you tile a background image on a container that wraps all of the columns to make it 'look' like they stretch, even when they don't.