CSS positioning thrown out in Safari & Chrome

[courtneydog]

Hi
I have just installed Safari (5.1.2) for the purposes of cross-browser testing and I have noticed a problem with one of my pages.
http://www.disc-northants.org/index.html

I have a floating div to the right of my page.

div#feature {
margin-left: 20px;
padding-left: 10px;
padding-right: 50px;
padding-bottom: 5px;
padding-top: 15px;
background-color:#E9FEFD;
float:right;
width: 200px;
min-height:250px;
}

This appears correctly in IE 9 and Firefox 9.01 but in Chrome(16.0.912.75 m) and Safari (5.1.2) the div is shunted away from the right of the page, forcing an image within the parent div (main) to be shunted down, below the "feature" div.
My page is setup with the following css:

/*TIDY PERFORMED 17/10/11>*/
body {
background-color: #83bde8;
font-size:12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
/* LAYOUT DIVS */
div#wrapper {
max-width:950px;
min-width: 800px;
background-color:#FFFFFF;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
padding: 0px;
overflow:auto;
  border-style:solid;
  border-color:#F18227;
  border-width:3px;
  border-radius:10px;
  -moz-border-radiust:10px;
}
div#header {
padding: 10px;
margin: 0px;
text-align: center;
position:relative;
}
div#nav {
width: 100px;
padding-left:10px;
padding-right:5px;
padding-top:0px;
padding-bottom:5px;
line-height:30px;
margin-top: 1px;
float: left;
}
div#main {
margin-left: 120px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 5px;
padding-left: 10px;
padding-right: 15px;
padding-bottom: 15px;
line-height: 20px;
position: relative;
min-height:325px;
overflow:auto;
}
div#footer {
clear:both;
padding: 5px;
margin: 0px;
margin-top: 5px;
height: 100px;
position:relative;
}
div#diary {
margin-left: 120px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 5px;
padding-left: 10px;
padding-right: 15px;
padding-bottom: 15px;
line-height: 20px;
position: relative;
min-height:325px;
overflow:auto;
}
div#feature {
margin-left: 20px;
padding-left: 10px;
padding-right: 50px;
padding-bottom: 5px;
padding-top: 15px;
background-color:#E9FEFD;
float:right;
width: 200px;
min-height:250px;
}
#facebook {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7px;
  padding:5px;
  border-style:solid;
  border-color:#F18227;
  border-width:2px;
  border-radius:5px;
  -moz-border-radiust:5px;
  width:400px;
  background-color:#FFFFFF;
}
div#diary_feature {
margin: 45px 50px 0px 0px;
background-image:url('../images/gym.jpg');
background-repeat: no-repeat;
padding: 0px 0px 0px 0px;
float:right;
width: 275px;
min-height:385px;
}
div#feature_form {
margin-left: 12px;
padding-left: 7px;
padding-right: 0px;
padding-bottom: 5px;
padding-top: 5px;
margin-right:1px;
float:left;
width: 450px;
min-height:230px;
}

I have just checked the remainder of the site and this problem persists.

I have a hunch that I have missed something simple but I have no idea what.

The html pages validate correctly as XHTML 1.0 Transitional
On validating my CSS, I am getting an issue with my moz border corrections but I don't see this as being related:

21 	div#wrapper 	Property border-radius doesn't exist in CSS level 2.1 but exists in [css3] : 10px
22 	div#wrapper 	Property -moz-border-radiust doesn't exist : 10px
94 	#facebook 	Property border-radius doesn't exist in CSS level 2.1 but exists in [css3] : 5px
95 	#facebook 	Property -moz-border-radiust doesn't exist : 5px

If anyone can please advise that would be great.
Thanks for reading this post.
Martin

[rtrethewey]

I checked your page in Firefox and Chrome and they both look identical. Did you fix something?

[courtneydog]

Hi rtrethewey

Indeed, I found that the overflow:auto; at the end of my #main div was causing this.

I think I need to read up on the use of overflow, as it certainly wasn't needed here.
C