Forums

sharkbait

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:

	#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:

	<div id=\"panel1\"></div>
	<div id=\"panel2\"></div>
	<div id=\"panel3\"></div>

		<div id=\"supersize\">
			<img src=\"skaleablebg.jpg\" />

		</div>

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 ...

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

cabe

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.

sharkbait

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

treehouse : what would you like to learn today?

Forums

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