[css] float / min-height FF-IE issue

programming web dev
1

hi there,

at the moment im just trying to learn some css-skills… and i ran into some problems… In IE my ‘site’ is displayed ok, but in FireFox it isnt, check it out here. In IE you will see that the background goes as far as the text goes… but in FF it doesnt. When i remove the float statements in my css script FF displays the background as far as the text goes too, but then i have that float problem… does anybody know how i can fix this? here’s my css:

body, html {
 margin: 0;
 background: #6EC2FF;
 text-align: center
}
#top {
 margin-left: 13px;
 width: 600px;
 height: 70px;
 background: url(top.jpg);
}
#bottom {
 height: 20px;
 background: url(bottom.jpg);
}
#center {
 width: 626px;
 margin: 0 auto 0 auto;
 text-align: left
}
#content {
 min-height:500px;
  height:auto !important;
  height:500px;
 background: #6EC2FF url(bg.jpg) repeat-y center;
}
#left {
 position: relative;
 left: 13px;
 float: left;
 text-align: justify;
 width: 430px;
}
#right {
 position: relative;
 right: 13px;
 float: right;
 text-align: justify;
 width: 170px;
}
p {
 font-family: verdana;
 font-size: 10px;
 margin: 10px;
}

thanks!