- This topic is empty.
-
AuthorPosts
-
December 19, 2009 at 5:17 am #27147loremParticipant
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 #68453Historical Forums UserParticipantInstead 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 #68628cabeMemberhi,
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 #68917loremParticipantHi 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 panelsany ideas
thanks again, jan
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.