Grow your CSS skills. Land your dream job.

3 Divs – 33.3% wide 100% height with 2px margin between

  • # December 19, 2009 at 5:17 am

    Hi everybody – i’m new here :)

    i got a little css problem i don’t know how to solve

    i try to arrange three Divs next to each other, each div should expand one third of the browser witdh and should always fill 100% of the height…the tricky part (i guess) is, that the divs should have a fixed 2px margin between each other ( one to the right of the first div, and one to the right of the second…or to the left of the third )

    you can see my current attempts here:

    for better illustration i gave the first and the third a background and the second div on hover…so ideally there would always be a 2px margin between them. right now the demo got no margin attempts included…

    my css looks like this at the moment:

    Code:
    #supersize{position:fixed;}
    #supersize img{height:100%;position:absolute;width:100%;z-index:0;}

    html, body {
    height: 100%;
    margin:0px;padding:0px;
    }
    div#panel1 {
    position:absolute;
    width:33.3%;
    min-height:100%;
    background-image: url(overlay.png);
    z-index:100;
    }
    div#panel2 {
    position:absolute;
    width:33.4%;
    left:100%;
    margin-left: -66.7%;
    min-height:100%;
    z-index:100;
    }
    div#panel2:hover {
    background-image: url(overlay.png);
    }
    div#panel3 {
    position:absolute;
    width:33.3%;
    right:0px;
    min-height:100%;
    z-index:100;
    background-image: url(overlay.png);
    }
    div#panel3:hover {

    }

    and the html:

    Code:

    btw. it’s not important that it’s working in IE6 :)

    does anyone know how i can solve this? …or point me in the right direction

    thanks, jan

    *edit: okay, making progress …

    # December 21, 2009 at 3:09 pm

    Instead of absolutely positioning the divs, look into and experiment with floating… maybe float panel1 left and panel 3 right…

    # December 24, 2009 at 7:23 am

    hi,

    your three divs need to have float:left;, the width of 33.3% and no margin. for the margins between them, you have to put extra divs in your panels.

    # January 4, 2010 at 12:30 pm

    Hi cabe,

    thanks for your reply and looking into it, you’re right about the floating & the inner div -> http://www.kunane.com/fazbem/wem-02/

    another problem i run into now is that each panel should have some kind of a sticky footer, so that the transparent background stretches accordingly to the height of the white content fields … the "© 2009 …" part should always be at the bottom
    -> http://www.cssstickyfooter.com/ won’t work with the floated panels

    any ideas

    thanks again, jan

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

You must be logged in to reply to this topic.

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