I have a container div (#columnsOne) set up at 920px + 38px padding + 2px border for a total of 960px wide.
(#columnsOne) uses CSS "overflow: auto;" to expand vertically and contain everything inside of it.
This works on all browsers to expand the div vertically, and also displays the horizonal width correctly on Firefox, Chrome, and IE7/8. However, on Safari, a horizontal scroll appears, and scrolls about 600px of blank space to the right.
At first I thought I might have the margin/padding set wrong, and that's why it might be expanding right, but there is no way I have 600px of extra space there.
Any thoughts as to why this might occur?
http://www.timetoplaymag.com/giveaway/daily/
Screen shots (new user, so I can't post on here): http://www.timetoplaymag.com/stacko/
many edits trying to get the code in here, newbie, sorry
<div class="columnsOne">
<div class="sectionLeft">
image/name of giveaway are here
</div>
<div class="sectionRight">
sign in form here
</div>
</div>
#columnsOne, .columnsOne {
clear: both;
width: 958px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 20px;
background-color: #FFFFFF;
height: auto;
border: 1px solid #77787b;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: none;
overflow: auto;
}
#columnsOne .sectionLeft, .columnsOne .sectionLeft {
float: left;
height: auto;
width: 590px;
background-color: #FFFFFF;
overflow: auto;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 19px;
padding-right: 19px;
padding-bottom: 19px;
padding-left: 19px;
}
#columnsOne .sectionRight, .columnsOne .sectionRight {
height: auto;
width: 270px
padding: 0px;
margin: 0px;
overflow: auto;
padding-top: 19px;
padding-right: 19px;
padding-bottom: 19px;
padding-left: 19px;
}