CSS coding problem

I am trying CSS. I have coded a 2-column centered layout with a header. IE6 presents it OK but Mozilla based browsers (I use FFox1.1.6) does not extent the background color to the end of the 2 DIVs (floated left & right) althought the footer is placed OK. Here is a bit of the code. Can anyone help?
/* CSS Document */

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a, div, img {margin: 0; padding: 0; border: 0;}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #d4b2c9;
text-align: center;
}
/* the next two sections force the contents to occupy the whole depth of the document.
This may not work in some browsers where the content is short of the window height. */

html, body, #wrapper{
min-height: 100%;
height: 100%;
}
html>body #wrapper {
height: auto;
}
#wrapper {
/* position: relative;*/
min-height: 100%;
text-align: left;
width: 760px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
background-color: #ffffff;
border-left: 2px solid #999999;
border-right: 2px solid #999999;
border-bottom: 2px none #722100;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom: 0;
}
#header {
height: 100px;
background-image: url(images/headerPicV11.gif);
background-repeat: no-repeat;
background-position: left top;
}
/* ID definitions - Tabbed nav bar */
#navlist {
margin-top: 0;
margin-left: 0;
border-top: 2px solid #999;
border-bottom: 1px solid #999;
padding: 5px 0 3px 0;
font: bold 10px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin-left: 0px;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #999;
border-bottom: none;
background: #d4b2c9;
text-decoration: none;
}
#navlist li a:link {
color: #646464;
}
#navlist li a:visited {
color: #6699ff;
}
#navlist li a:hover {
color: #646464;
background: transparent;
border-color: #999;
}
#navlist li a#current {
background: transparent;
border-bottom: 1px solid white;
}
/* ID definitions - Contents */
#content {
width: 520px;
float: left;
padding: 0 10px 0 0;
}
#content p {
font-size: 80%;
line-height: 1.5em;
padding-left: 2em;
padding-top: 1.5em;
text-align: justify;
}
#content h1 {
font-style: italic;
padding: 15px 0 0 0;
border-bottom: 1px solid #999999;
color: #985581;
text-align: center;
}
#content h2 {
font-size: 120%;
color: #940D1E;
background-color: transparent;
border-bottom: 1px dotted #FF9006;
}
/* ID definitions - Side nav bar */
#sideNav {
float: right;
width: 210px;
padding: 40px 10px 0 0;
}
#sideNav ul {
width: 180px;
list-style: none;
margin: 0;
padding: 0px 0px 0 0;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
#sideNav ul li {
width: 180px;
border-top: 0px solid #999;
border-bottom: 1px solid #999;
margin: 0;
padding: 0;
/* font-size: 120%;*/
vertical-align: bottom;
font: bold 10px Verdana, sans-serif;
}
#sideNav a {
width: 175px;
/*not sure why making this 5px less than the ul li allows FireFox to get the
background within the RH edge. At 180px it overlaps by 5px.*/
display: block;
background-color: #d4b2c9;
padding: 0px 0px 5px 0.5em;
border-left: 0px none #999;
border-right: 0px none #999;
color: #646464;
text-decoration: none;
}
#sideNav li a:link {
/* */
}
#sideNav li a:visited {
color: #6699ff;
}
#sideNav li a:hover {
background-color: transparent;
/* color: #646464;*/
}
#footer {
/* position: absolute;
bottom: 0;*/
clear: both;
padding: 2px 0 5px 0;
text-align: center;
font-size: 70%;
color: #999999;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
background-color: #d4b2c9;
}

  PurplePenny 18:27 08 Oct 05

Have you tried giving those two divs a height? I've found that that works, though it sometimes causes other problems.

This is one of many things, like centre alignment, which I think should be obvious and easy-peasy in CSS, but which aren't.

I experimented further and discovered my problem was I had 'position relative' for the wrapper div and not 'position absolute'. this cured the problem BUT I now discover that all browsers seem to take no notice of the 'margin-left: auto' and 'margin-right: auto;' statements and place my 'wrapper' either left margin in the centre (IE6) or bang to the left (FF1.0.6). I have not yet discovered why. Any ideas.

  PurplePenny 18:50 09 Oct 05

Sorry, no ideas on that one, I have never had any success with margin: auto; either.

  Taran 22:06 09 Oct 05

CSS Centering is a pain in the rear, mainly due to the lousy way in which various browsers interpret CSS (or fail to more to the point).

Simple example:

body {margin:0px; padding:0px;}

#Content {
position:absolute;
left:50%;
width:500px;
margin-top:50px;
margin-left:-266px;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}

Another one:

body {
margin: 0px; padding:0px;
text-align:center;
}

#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}


Both work well in pretty much all browsers, but they appear, at first glance anyway, to break or bend the rules slightly.

Applying CSS centering works for block elements and by combining the text-align:center; with the margin: 0px; most browsers that have trouble with the margin: 0px; on its own suddenly seem to start behaving properly and centre things as they should be.

Something to think about ?

I shall tae this and experiment a bit. Report back later.

Input from Taran worked once I got the hang of what's happening. Both IE6 and Mozilla based browsers work fine. HOWEVER, Dreamweaver has gone AWOL on the WISYWIG screen with the text on the left and the #wrapper in the middle! Will I have to stick to the code view from now? I wonder I the new version (8?) resolves this or have I got something set up wrong. Maybe this is a question for a Dreamweaver forum (which is the best one?).

Thanks for your help,

  Taran 17:03 12 Oct 05

Dreamweaver 8 does get things right more often in design view with CSS, but it also still throws page elements all over the place now and then as well. Better than MX 2004 but not 100%, so code view is still a necessity...

This thread is now locked and can not be replied to.

Best phone camera 2016/2017: Galaxy S7 vs iPhone 7 vs Google Pixel vs HTC 10 Evo vs OnePlus 3T vs…

1995-2015: How technology has changed the world in 20 years

The Pantone Colour of the Year 2017 is Green

Super Mario Run preview | Hands-on first impressions of Super Mario Run: Mario's iPhone & iPad…