CSS stick div to the bottom of the container *problem* [Archive]

XeonGX

December 14th, 2007, 18:17

Hello everyone,
I am facing a problem,
I want to make a div to stick to the bottom of its container,
But I don't want to use the absolute, bottom : 0 way because it makes the div stick to the bottom of the browser window, not the container div.

<div id="container">
<div id="top">This should stick to the top</div>
<div id="bottom">This should stick to the bottom</div>
</div>

iBrightDev

December 14th, 2007, 18:42

do this instead...

<style>
#top {width: 980px; margin-left: auto; margin-right: auto; border: 1px solid black; height: 100px; position: relative;}
#container {width: 980px; margin-left: auto; margin-right: auto; border: 1px solid black; height: 100%; position: relative; min-height: 500px;}
#bottom {width: 980px; margin-left: auto; margin-right: auto; border: 1px solid black; height: 100px; position: relative;}
</style>

<div id="top">
This should stick to the top
</div>
<div id="container">
Center Container
</div>
<div id="bottom">
This should stick to the bottom
</div>

think along the line of tables when using css and divs, it will help you learn it better, and accomplish more complex layouts. problem is people think about it to hard when they start using divs. pretend each div is a row in a table, and you should be good. let us know if you have more questions.

XeonGX

December 14th, 2007, 20:48

do this instead...

<style>
#top {width: 980px; margin-left: auto; margin-right: auto; border: 1px solid black; height: 100px; position: relative;}
#container {width: 980px; margin-left: auto; margin-right: auto; border: 1px solid black; height: 100%; position: relative; min-height: 500px;}
#bottom {width: 980px; margin-left: auto; margin-right: auto; border: 1px solid black; height: 100px; position: relative;}
</style>

<div id="top">
This should stick to the top
</div>
<div id="container">
Center Container
</div>
<div id="bottom">
This should stick to the bottom
</div>

think along the line of tables when using css and divs, it will help you learn it better, and accomplish more complex layouts. problem is people think about it to hard when they start using divs. pretend each div is a row in a table, and you should be good. let us know if you have more questions.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MAC SUCKS</title>
<style type="text/css">

</style>
</head>

<body>
<div id="wrapper">
<div id="left">
<div id="top"></div>
<div id="bottom"></div>
</div>
<div id="right">
<div id="top"></div>
<div id="bottom"></div>
</div>
<div id="center">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</body>
</html>

As you can see I've got a 3 column layout, each column will stretch depending on the other column. The problem is when I put 2 divs in side the left and right columns, the first div should stick to the top, and the second div should stick to the bottom of the left/right columns.

iBrightDev

December 15th, 2007, 02:01

please make an illustration of exactly what you need and i will post your code in css with divs. i cam taking your code, but, not making much sense. so, if you have a template, post it here, ad i will get you going. :D

i can get you working perfectly, but, unless i see a template or something then i cant help much. maybe post a link to the page.

XeonGX

December 15th, 2007, 08:03

I've illustrated the layout
EDIT: problem solved

h0ster

January 1st, 2008, 21:16

For future reference the positioning model works on the basis that position of absolute is defined by the last div to follow the positioning model.

Or

Nest the div and then set the position: of the container that its in to 'relative'. That will always work.