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 {
border-color: #000; border-width: 1px; border-style: solid; padding: 0px;
background-color: #557755;
width: 443px; min-height: 380px;
}
.titlebar {
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;
}
.content { padding: 4px; }
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
ї=DIV=] = the div that should be bottom aligned
No aligning:
---------------
| text here
| bla bla
| bla bla
| bla bla
|--------------
| ї=DIV=]
---------------
| empty
| space
---------------
Align to bottom:
---------------
| text here
| bla bla
| bla bla
| bla bla
|
|
|--------------
| ї=DIV=]
---------------
Do you understand my ugly ASCII-art?

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