Page 1 of 1

[solved]Align a div to the bottom of another

Posted: Sat Apr 10, 2004 3:02 am
by vigge89
Is it possible to align a DIV to the bottom of another DIV?
I want my site to contain a small DIV on the bottom of a the main content DIV, but i have no idea on how to align it, what code to use, etc. The main content DIV have a min-height set in CSS, so that's when the problem appears. i don't want to use tables, and the main content is (obviously) dynamic in height, so i cannot position it relativly or absolute. So i instead want to use some kind of code to position it on the bottom of the main content DIV. Is this possible?

Re: Align a div to the bottom of another

Posted: Sat Apr 10, 2004 3:10 am
by Brian
What do you mean by positioning a DIV on the bottom of the other? Is one DIV a child element of the other or are they siblings? What is the problem that appears due to the min-height attribute?

Posted: Sat Apr 10, 2004 4:10 am
by vigge89
structure:

Code: Select all

<div class='conbox'>
<div class='titlebar'><!-- title of page --></div>
<div class='content'>

<!-- main content goes here -->

</div>
<!-- the div should be placed here, and be aligned to the bottom of the 'conbox'-DIV -->
</div>
stylesheet:

Code: Select all

.conbox &#123;
border-color: #000; border-width: 1px; border-style: solid; padding: 0px;
background-color: #557755;
width: 443px; min-height: 380px;
&#125;

.titlebar &#123;
background-color: #464; border-bottom: 1px solid #000;
font-family: Verdana, Tahoma; font-size: 9px; color: #000; font-weight: bold;
padding: 0 0 1px 4px;
&#125;

.content &#123; padding: 4px; &#125;

Posted: Sat Apr 10, 2004 4:16 am
by vigge89
btw, the problem which the min-hieght creates is that if there wasn't any min-height, I wouldn't need to align the DIV, since after the DIV ends, the 'conbox'-DIV also ends. but as there is a min-height, if i just skip the aligning, the DIV which should be bottom-aligned appears "above" the end of the parent DIV.

Code: Select all

&#1111;=DIV=] = the div that should be bottom aligned

No aligning:
---------------
| text here
| bla bla
| bla bla
| bla bla
|--------------
| &#1111;=DIV=]
---------------
| empty
| space
---------------

Align to bottom:
---------------
| text here
| bla bla
| bla bla
| bla bla
|
|
|--------------
| &#1111;=DIV=]
---------------
Do you understand my ugly ASCII-art? :wink:

Posted: Sun Apr 11, 2004 4:44 am
by vigge89
noone does? :?

Posted: Sun Apr 11, 2004 4:51 am
by andre_c
I would think that you can put the second div inside the first one, give the first one a position property (absolute, relative), and then on the second div do:
position: absolute; bottom: 0px;

...but you must make sure to position the first div, even if you just give it:
position: relative;
if you don't, the second div is positioned relative to the document.

Posted: Tue Apr 13, 2004 8:36 am
by ssj4gogita4
Yes it is possible just close all tags and put another div align in there. Works for my site

Posted: Tue Apr 13, 2004 9:12 am
by vigge89
i finally got it to work, after closing the div, and then started a new div....