CSS - [HELP] Div vertical align Bottom

2008-07-16

Hey,

I want to have a div aligned to the bottom of another div. I achieved it with the code bellow but the problem is it just works on IE6+. I appreciate some help here. Thanks

HTML Code:

<head>
<style type="text/css">

body{
margin: 0;
padding: 0;
}

#wrap{
width: 750px;
background-color: #CCC;
}

#header{
width:100%;
background-color:#00FF00;
}

#flash{
width:100%;
background-color:#000;
}

.container{
height:100%;
}

.leftcol{
position: relative;
float: left;
width:250px;
height:100%;
background-color:#999;
}

.rightcol{
float: left;
width:500px;
background-color:#666;
}

.top{
width:100%;
background-color:#FFF;
}

.bottom{
position: absolute;
bottom: 0;
left: 0;
width:250px;
background-color:#FF0000;
}

#footer{
float: left;
clear: both;
width:100%;
background-color:#00FF00;
}

</style>
</head>

<body>
	<div id="wrap">
		
		<div id="header">Header
		</div>
		
		<div id="flash">Flash
		</div>
		
		<div class="container">
		
			<div class="leftcol">
				 <div class="top">Top
			 	</div>
			 	<div class="bottom">
					<ul>
						<li>line 1</li>
						<li>line 2</li>
						<li>line 3</li>
						<li>line 4</li>
						<li>line 5</li>
					</ul>
			 	</div>
			</div>
		
			<div class="rightcol">Right Column
			  <p>Cras vestibulum ultrices justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis porttitor. Proin arcu magna, fermentum vel, tempus in, convallis sit amet, nisl. Nam feugiat neque ac dui. Aliquam erat volutpat. Cras odio. </p>
			  <p>Donec sapien felis, gravida et, vulputate nec, tincidunt ut, urna. Maecenas eu lorem quis arcu volutpat vulputate. Etiam imperdiet libero eu lorem. Etiam metus enim, sollicitudin nec, scelerisque vitae, cursus eget, nunc. Maecenas sagittis erat sed odio. Etiam facilisis cursus nunc. </p>
			  <p>Mauris id nisl. Proin rutrum aliquam risus. Ut vel justo sollicitudin odio semper pretium. Quisque risus. Nullam sapien orci, adipiscing facilisis, laoreet et, varius ut, leo.Nunc magna. Nulla facilisi. Fusce hendrerit molestie erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ante lectus, pulvinar vitae, hendrerit in, hendrerit at, eros. </p>
			  <p>Duis ultricies. In hac habitasse platea dictumst. Pellentesque rutrum ultrices ipsum. Ut urna odio, blandit vel, mattis sit amet, tristique a, augue. Nulla non nisi. Maecenas in leo sit amet neque accumsan dignissim. Vestibulum tempus orci vitae odio. Quisque turpis diam, sodales ut, cursus vel, sodales in, pede. Donec vestibulum risus. Maecenas nec ante. Duis blandit tempor magna. Suspendisse potenti. </p>
			</div>
		</div>
		
		<div id="footer">Footer
		</div>
	</div>
</body>

www.uxte.com | Visual Design

uxte · 2008-07-20 #2

Ok, I think I didn't explain well what I wanted so I put an example online. See it at: http://www.uxte.com/test/div-align-bottom-example.html

As you can see if you test it in IE 6 or 7 (I haven't tested it in prior versions) it works just fine but it doesn't in FF, Opera or Netscape.

Hope someone can help.

poppa · 2008-07-21 #3

I think you have to set the height to 100% both in the HTML element and the BODY element as well to get it working in real browsers. But remember: 100% is 100% of the window not what's left of the space. So if an element has 100% height and begins 20px down at the page the height of the page will be 20px + 100%.

Code:

HTML, BODY, #wrap { height: 100% }
BODY { ... }
...

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:


	Ultrashock Forums > Development > Client Side • CSS - [HELP] Div vertical align Bottom	Member Blogs

	uxte 1 Blog Entries	2008-07-20 #2
	Ok, I think I didn't explain well what I wanted so I put an example online. See it at: http://www.uxte.com/test/div-align-bottom-example.html As you can see if you test it in IE 6 or 7 (I haven't tested it in prior versions) it works just fine but it doesn't in FF, Opera or Netscape. Hope someone can help.

	poppa	2008-07-21 #3
	I think you have to set the height to 100% both in the HTML element and the BODY element as well to get it working in real browsers. But remember: 100% is 100% of the window not what's left of the space. So if an element has 100% height and begins 20px down at the page the height of the page will be 20px + 100%. Code: HTML, BODY, #wrap { height: 100% } BODY { ... } ...