Grow your CSS skills. Land your dream job.

Right Float dropping in IE

  • # March 18, 2009 at 8:49 am

    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
    # March 18, 2009 at 9:25 am

    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

    # March 19, 2009 at 6:27 am

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".