Right Float dropping in IE

[dmbutler]

Hello All,

Just wondering if I could call upon your assistance again? I have a right floated div that drops to the bottom when viewed in IE. Would somebody know why this is happening? Could it be the IE Box viewing bug I’ve read about? Any help would be gratefully received.

Thank you, D. :)

http://www.kscope.co.uk/upload/files/contact.html

And here’s some of the potentially relevant CSS

Code:

@charset “UTF-8″;
* {
margin: 0;
padding: 0;
}
img, header, div { behavior: url(iepngfix.htc)
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #99CCCC url(../pictures/gradient.jpg) no-repeat;
}
h1, h2, h3, p {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 25px;
padding: 5px 5px 5px 0px;
}
h2 {
font-size: 12px;
text-transform: uppercase;
margin-top: 10px;

}
h2 a {
color: #FFFFFF;
text-decoration: none;
background: #003333;
padding: 8px 40px;
border: 1px solid #FFCC00;
}
h2 a:hover {
color: #003333;
background: #FFCC00;
border: 1px solid #003333;
}
p {
font-size: 12px;
line-height: 18px;
}
p a {
color: #000000;
text-decoration: underline;
}
p a:hover {
color: #FFCC00;
}
p a:visited {
color: #666666;
}
.title {
float: right;
width: 524px;
margin-bottom: 8px;
border-bottom: 1px solid #333333;
margin-right: 8px;
height: 40px;
}
.active {
}
#wrapper {
width: 940px;
margin: auto;
background: url(../pictures/shadow.png) repeat-y;
}
#wrapperContent {
width: 900px;
margin-right: auto;
margin-left: auto;
background: #FFFFFF;
height: 100%;
}
#header {
background: url(../pictures/header.jpg);
height: 24px;
width: 900px;
margin-right: auto;
margin-left: auto;
border-bottom: 4px solid #FFCC00;
padding-top: 123px;
}
#header ul {
list-style: none;

}
#header li {
display: inline;

}
#header li a {
display: block;
padding: 5px 15px;
float: right;
color: #FFFFFF;
font: 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;

}
#header li .active {
color: #000000;
background: #FFCC00;
}
#header a:hover {
color: #000000;
background: #FFCC00;

}
#content {
width: 884px;
padding-top: 8px;
border-top: 1px solid #333;
margin-right: 8px;
margin-left: 8px;
}
#slider {
width: 880px;
height: 276px;
border: 2px solid #CCCCCC;
margin: 8px auto;
}

#sidebarLeft {
float: left;
width: 315px;
background: #FFFFCC url(../pictures/quote.jpg);
height: 273px;
border: 1px solid #FFCC00;
margin-bottom: 8px;
padding-top: 55px;
padding-left: 15px;
padding-right: 8px;
}
#sidebarLeft p {
}
#sidebarRight {
float: right;
width: 524px;
margin-bottom: 16px;
margin-right: 8px;
}
#sidebarRight ul {
list-style: url(../pictures/pointer.jpg) none inside;
font-size: 12px;
line-height: 20px;
padding-top: 5px;
}
#sidebarRight li {
background: center;
}
#sidebarRight a {
color: #000000;
}
#sidebarRight a:hover {
color: #FFCC00;
}
#footer {
height: 25px;
width: 890px;
clear: both;
border-top: 2px solid #FFCC00;
padding-top: 8px;
background: url(../pictures/footer.jpg);
color: #F0F0F0;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}
#footer a {
font-size: 11px;
color: #CCCCCC;
}
#footer a:hover {
color: #FFCC00;
}
#end {
height: 35px;
width: 940px;
background: url(../pictures/end.png) no-repeat 0px -10px;
margin-right: auto;
margin-left: auto;
}
#contact {
background: url(../pictures/contact.jpg) no-repeat;
}
#form {
float: left;
width: 315px;
background: url(../pictures/quickQuote.jpg) no-repeat;
height: 100%;
border: 1px solid #FFCC00;
margin-bottom: 8px;
padding-top: 55px;
padding-left: 15px;
padding-right: 8px;
}
.fieldset {
border-style: none;
width: 315px;
float: left;
}
.submit {
background-color:#003333;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
margin-bottom:8px;
padding:2px;
margin-top: 0px;
}
.textfield {
background-color:#FFFF99;
border:1px solid #FFCC00;
color:#000000;
font-family:Georgia,”Times New Roman”,Times,serif;
font-size:10px;
overflow:auto;
padding:5px;
width:300px;
margin-bottom: 5px;
}
.label {
font: 11px/20px Arial, Helvetica, sans-serif;
text-transform: uppercase;
width: 300px;
}
.formfield {
background-color:#FFFF99;
border:1px solid #FFCC00;
color:#000000;
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
padding:5px;
width:300px;
}

[Rob MacKay]

you have your #contact and #sidebarRight outside of your content div. That div is set for the full width of the area, so its rendering it outside that div, which is underneath.

Try moving your #contact and #sidebarRight into the #content div

[dmbutler]

Thank you, Robski! That worked perfectly – I didn’t even notice! :D

[Author]

Posts