• Howdy! Welcome to our community of more than 130.000 members devoted to web hosting. This is a great place to get special offers from web hosts and post your own requests or ads. To start posting sign up here. Cheers! /Peo, FreeWebSpace.net
managed wordpress hosting

CSS stick div to the bottom of the container *problem*

XeonGX

XeonGX

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

Code: 
<div id="container">
      <div id="top">This should stick to the top</div>
      <div id="bottom">This should stick to the bottom</div>
</div>
 
do this instead...

HTML: 
<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.
 
Last edited:
methodcomptech said:
do this instead...

HTML: 
<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.
Click to expand...

Code: 
<!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">
<!--
* {
	margin: 0px;
	padding: 0px;
}
body {
	background-color: #292929;
}
#wrapper {
	padding: 0px;
	width: 967px;
	margin-right: auto;
	margin-left: auto;
}
#left {
	background-image: url(images/left-bg.gif);
	background-repeat: repeat-y;
	margin: 0px;
	padding: 0px;
	float: left;
	width: 46px;
}
#right {
	background-image: url(images/right-bg.gif);
	background-repeat: repeat-y;
	margin: 0px;
	padding: 0px;
	float: right;
	width: 46px;
}
#center {
	background-image: url(images/center-bg.gif);
	background-repeat: repeat-y;
	margin-right: 46px;
	margin-left: 46px;
	padding: 0px;
}
#left, #right, #center {
	padding-bottom: 1000em;
	margin-bottom: -999.5em;
}
#wrapper {
	overflow: hidden;
}
#footer {
}
#left #top {
	background-image: url(images/top-left-bg.gif);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	height: 180px;
	width: 46px;
	display: block;
}
#left #bottom {
	background-image: url(images/bottom-left-bg.gif);
	background-repeat: no-repeat;
	height: 180px;
	width: 46px;
}
#right #top {
	background-image: url(images/top-right-bg.gif);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	height: 180px;
	width: 46px;
	display: block;
}
#right #bottom {
	background-image: url(images/bottom-right-bg.gif);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	height: 180px;
	width: 46px;
}
-->
</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.
 
Last edited:
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.
 
I've illustrated the layout
EDIT: problem solved
 

Attachments

  • layout.GIF
    layout.GIF
    8.5 KB · Views: 15
Last edited:
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.
 
You must log in or register to reply here.
Back
Top