3 column liquied layout using floats: a: element slightly "pushed in" by float divs

Discussion in 'CSS' started by garek007, May 16, 2005.

  1. #1
    Hi,

    I have a 3 column layout. My code is below, but first let me explain. I'm using IE 6 on WinXP. It appears to be an IE problem only. I use three divs, the left and right use floats. The middle div looks like the outer two are pushing in the link color. It's hard to explain, so I posted it below. See for yourself. Thanks!

    #navlist {


    margin-left: 260px;
    margin-right: 260px;


    }
    #navlist2{
    float: left;
    top: 93;
    left: 10px;
    width: 250px;
    margin: 0;
    }
    #navlist3 {
    position: absolute;
    top: 93;
    right: 10px;
    width: 250px;
    float: left;
    }
    #navlistDown {
    width: 250px;
    float: left;
    margin: 0px;
    }
    #navlist ul, #navlist2 ul, #navlist3 ul, #navlistDown ul {

    padding: 5;
    font-family: Arial, "Century Gothic", "Futura Bk BT";
    font-size: 14px;
    background-color: #cde;
    margin: 5px 0 0 0;
    list-style-type: none;
    border-top: 1px #000 solid;
    border-left: 1px #000 solid;
    border-right: 1px #000 solid;
    text-decoration: none;
    text-align: left;
    word-spacing: .25em;
    letter-spacing: .05em;
    text-transform: uppercase;


    }

    #navlist li, #navlist2 li, #navlist3 li, #navlistDown li{ margin: 0; }
    #navlistDown a{
    display: block;
    color: #000;
    font-family: "Trebuchet MS", "Futura Bk BT", Arial;
    width: 99.99%;
    background-color: #dbf;
    border-bottom: 1px #999 solid;
    text-align: left;
    text-decoration: none;
    padding: 4;
    font-style: normal;
    font-size: 12px;
    text-transform: none;
    }

    #navlist a, #navlist2 a, #navlist3 a {
    display: block;
    color: #000;
    font-family: "Trebuchet MS", "Futura Bk BT", Arial;
    width: 100%;
    background-color: #eed;
    border-bottom: 1px #999 solid;
    text-align: left;
    text-decoration: none;
    padding: 4;
    font-style: normal;
    font-size: 12px;
    text-transform: none;

    }
     
    garek007, May 16, 2005 IP