Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Old 02-25-2008, 07:41 PM Bottom alignment
pealo86's Avatar
Super Spam Talker

Posts: 849
Name: Matt Pealing
Location: England, north west
Trades: 0
There's something thats been puzzling me for a while and I cant really figure out a proper solution!

say I have a div with properties something like the following:
Code:
width:200px;
height:300px;
and I make another div something like:
Code:
width:200px;
height:50px;
What would I do if I wanted the second div to always be at the bottom of the containing div? even If I were to alter the containing div's attributes so that it was even taller.

I have a feeling its something to do with positioning [and setting the 'bottom' attribute], but Im not sure which positioning I should go for as none of them seem right!
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE
pealo86 is offline
Reply With Quote
View Public Profile Visit pealo86's homepage!
 
 
Register now for full access!
Old 02-25-2008, 08:21 PM Re: Bottom alignment
Skilled Talker

Posts: 52
Name: Bruce
Trades: 0
You're right. It involves positioning and the bottom property. This is easy to do, but there's more than one way to achieve this, which depends on how you set up your layout.

If you want the container div to stay in the normal flow of the page or have it's presence known by the surrounding elements, then you'll want to add on the outer div: position:relative;. Then on the inner div: position:absolute;left:0;bottom:0.

The other way is the same except you'd change the outer div from position:relative to position:absolute, and then the top and left to the actual position you want it from it's parent container which will be the whole window if it's not inside any other positioned parent. Which means it has to have a position explicitly applied to it other than the default static position.

If you used position:absolute to position lots of elements in your layout then you'd most likely want to go with the second solution, otherwise you'd probably want to go with the first one.

Last edited by SillyWilly; 02-26-2008 at 09:00 AM..
SillyWilly is offline
Reply With Quote
View Public Profile
 
Old 02-26-2008, 05:26 AM Re: Bottom alignment
pealo86's Avatar
Super Spam Talker

Posts: 849
Name: Matt Pealing
Location: England, north west
Trades: 0
Ahhh I get ya, thanks!
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE
pealo86 is offline
Reply With Quote
View Public Profile Visit pealo86's homepage!
 
Old 02-26-2008, 09:07 AM Re: Bottom alignment
Skilled Talker

Posts: 52
Name: Bruce
Trades: 0
No problem buddy.

Also if you're using a div container just to apply a positioning context for it's child elements, then you don't have to set a top:, left: etc. for it. you could just have on the container div: position:relative or position: absolute only.

You'd only want to set a top:, left: etc on the parent div if you're wanting to position it somewhere different from it's normal flow as well.

I edited my first post after realizing that I had extra pointless code in it.

Last edited by SillyWilly; 02-26-2008 at 09:10 AM..
SillyWilly is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Bottom alignment
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.39750 seconds with 12 queries