Hi everyone,
Here's my site: www.plumdrama.com

In IE7 it looks great, but in FF the wrapper div doesn't extend around all the content like it's supposed to. I feel like I've tried everything to fix it, but i'm at a loss! It all started when i started trying to center the wrapper div on the page. If someone can please take a look and provide some guidance, i'd be eternally grateful! i'm thinking of buidling two style sheets (one for IE and the second for FF, as a fix..but that seems like it could get messy really fast)

Here's the CSS code for the wrapper div:
body {
margin: 0;
padding: 0;
background-color: #6bcde3;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
text-align: center;
}

#wrapper {
text-align: left;
background-color: white;
width: 770px;
padding: 8px;
margin: 0 auto;
}



thanks for reading,
-jim

You're right about that, Jim. They can get messy.

The answer relates to floats in this case. If you use them, you need to clear them. For example, you should have a div after your hypernav div to clear it (some people use <br />, but I've always found the behavior of a <br /> clearing to be inconsistent.)

<div style="clear:  right;  height:  1px;  overflow:  hidden;"></div>

The other thing you can do is to create a "faux" background that's 770px x 1px, fill it white, and center it in your body tag:

body {
     background:  URL(../images/background-image.gif) top center repeat-y #6bcde3;
}

Yup, gotta clear those floats !
http://css-discuss.incutio.com/?page=ClearingSpace