[solved]Align a div to the bottom of another

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

[solved]Align a div to the bottom of another

Post 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?
Last edited by vigge89 on Tue Apr 13, 2004 9:13 am, edited 1 time in total.
Brian
Forum Contributor
Posts: 116
Joined: Thu Apr 18, 2002 5:33 pm

Re: Align a div to the bottom of another

Post 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?
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post 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;
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post 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:
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

noone does? :?
User avatar
andre_c
Forum Contributor
Posts: 412
Joined: Sun Feb 29, 2004 6:49 pm
Location: Salt Lake City, Utah

Post 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.
ssj4gogita4
Forum Newbie
Posts: 11
Joined: Wed Mar 31, 2004 9:03 pm
Location: TX
Contact:

Post by ssj4gogita4 »

Yes it is possible just close all tags and put another div align in there. Works for my site
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

i finally got it to work, after closing the div, and then started a new div....
Post Reply