Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Vertical-aligning a div

Status
Not open for further replies.
superslurpee

superslurpee

Programmer
May 15, 2002
108
Hi,

I have a page-sized div (w & h are 100%) and I want a div inside it (the bottom links) to move to the bottom of the page (rather than just underneath the content that is there). Of course there's no problem when the page content is large, but when it is small, the bottom links div just resides directly underneath the content.

I've tried vertical-align:bottom but that doesn't seem to work. I know I could position it absolutely and have the bottom=0em but for accessibility, that isn't good (resizing text would mean the content and links would overlap). I just basically need to 'valign=bottom' like the way it used to be done with tables.

So how do I move a div to the bottom of another div?

Thanks for any help peeps!
 
Sort by date Sort by votes
could you not put a table in the outer div with two rows set the height of the table to 100% and then in the bottom row put your div in it, somthing like this, if you dont specify the height of the cells the top cell will take up as much space as it need for the content while the bottom div always stays at the bottom


<html>
<head>
</head>
<body>
<div style=&quot;width:100%; height:100%&quot;>
<table height=100% width=100%>
<tr><td><!-- CONTENT GOES HERE --></td></tr>
<tr><td valign=bottom><div>link1 link2</div></td></tr>
</table>
</div>
</body>
</html>
 
Upvote 0 Downvote
Hey, thanks for responding!

I know I could do it with a table and cells with valign=bottom, but because we are big on accessibility, I can't do that. Tables shouldn't be used for layout purposes, just for specific content that is actually a table (like table data). We try to do everything using CSS and divs. Content on one side, style and layout on the other. Of course that is in a perfect world...

Thanks again.
 
Upvote 0 Downvote
darn, does the bottom aligned div have to go in the 100% height div, can it not go below:

<div style=&quot;height:95%; width:100%; background-color:red&quot;></div>
<div style=&quot;top:95%; width:100%; background-color:blue&quot;>link1 link2</div>
 
Upvote 0 Downvote
Yeah, I guess I could do that eh? I've been set on trying to put it to the bottom of the big div (which you should be able to do dammit!). But I suppose I'll do as you suggest, put the links div underneath the big div.

Thanks for your help! :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
689
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
199
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
760
spamjim
spamjim
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
600
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top