borders & colours in FF

[Ruriko]

This is my layout http://www.omganime.info the layout doesn't look right on Firefox 3 but it looks correct on IE7. You see the borders aren't fully down to the footer it just stops to the header on Firefox. How can I fix this? also the content box isn't fully white how can I fix this?

@charset "utf-8";
/* CSS Document */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
margin-top: 0px;
margin-bottom: 0px;
background-color: #FFFFC9;
}

#wrapper {
width: 1000px;
border-right-width: 5px;
border-left-width: 5px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FF0000;
border-left-color: #FF0000;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
}

#header {
width:1000px;
height:200px;
background-image: url(images/header.jpg);
}

#bar {
height: 35px;
width: 1000px;
background-image: url(images/bar.jpg);
background-repeat: repeat-x;
}

#side-left {
float: left;
width: 200px;
color: #FF0000;
font-size: 70%;
background-color: #FFFFFF;
}

#side-a {
background-color: #FFFFC9;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
}

#content {
width: 600px;
float: left;
font-size: 70%;
background-color: #FFFFFF;

}

#info {
background-color: #FFFFFF;
padding-top: 3px;
padding-bottom: 3px;
margin: 10px;
}

#content h2 {
margin: 0px;
}

#side-right {
float: right;
width: 200px;
font-size: 70%;
color: #FF0000;
background-color: #FFFFFF;
}

#side-b {
padding: 5px;
background-color: #FFFFC9;
margin-top: 10px;
margin-bottom: 10px;
}

#side-b a {
text-decoration: none;
}

#side-b a:hover {
color: #0000FF;
background-color: #FFFFFF;
}

#footer {
background-color: #A00405;
width: 1000px;
float: right;
text-align: center;
font-size: 80%;
}

#footer-info {
padding: 5px;
}

ul {
list-style-type: none;
padding: 0px;
}

li {
list-style-type: none;
padding: 2px;
}

h2 {
font-size: 120%;
}

[coothead]

Hi there Ruriko,

try adding overflow:auto to the #wrapper rules. :agree: