Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #27147
    lorem
    Participant

    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 …

    #68453

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

    #68628
    cabe
    Member

    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.

    #68917
    lorem
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.