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?
[solved]Align a div to the bottom of another
Moderator: General Moderators
[solved]Align a div to the bottom of another
Last edited by vigge89 on Tue Apr 13, 2004 9:13 am, edited 1 time in total.
Re: Align a div to the bottom of another
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?
structure:
stylesheet:
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>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; }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.
Do you understand my ugly ASCII-art? 
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=]
---------------- andre_c
- Forum Contributor
- Posts: 412
- Joined: Sun Feb 29, 2004 6:49 pm
- Location: Salt Lake City, Utah
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.
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.
-
ssj4gogita4
- Forum Newbie
- Posts: 11
- Joined: Wed Mar 31, 2004 9:03 pm
- Location: TX
- Contact: