1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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;

    SEMrush
    }
    #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
    SEMrush