CSS - aligning to bottom of containing div

[Adnams Drinker]

Hi all

A page I'm working on has three divs:

<div id="main">
   <div class="floatleft">((Text content goes here))<div>
   <div class="floatright">((Flash movie goes here))<div>
</div>

ie. "main" is the containing <div> with the other two floated left and right within it.

My question is this: is there any way via CSS I can make "floatright" align to the bottom of "main", so that it always 'sticks' to the bottom edge of "main" regardless of the height of the "main" div?

 

[ruffneck]

Never tried this before but have you tried:

bottom: 0;

 

[Messiah Khan]

Are floatleft and right actually set to 'float'? if not, could you not set them to position:absolute; bottom: 0px; and the main to position:relative; ? Or if they have to be set to float, could you put in another div around floatleft and floatright with position bottom?

 

[Adnams Drinker]

Are floatleft and right actually set to 'float'? if not, could you not set them to position:absolute; bottom: 0px; and the main to position:relative; ? Or if they have to be set to float, could you put in another div around floatleft and floatright with position bottom?

Yep, the two inner <divs> are floated in the way they're named. I'll give your suggestions a go - can always fake it if needs be, but would prefer to do it a more efficient way if one exists ...

 

[t31os]

Don't think you can do it with floating DIV's mate.

Your code is off by the way, the closing DIV tags are missing a / which i'm sure is simply because it's an example.

In any case because you're floating those DIVs i'd imagine the main DIV is also using float. I don't think you'll be able to get what you want anyways.

I think it would be possible using unfloated elements, you can then use vertical-align in the CSS.

As far as i could get was basically as you have it now, sits to the right but doesnt push to the bottom, tried various things, even tried putting the content into list elements, still no luck.

 

[Adnams Drinker]

Your code is off by the way, the closing DIV tags are missing a / which i'm sure is simply because it's an example.

Ooops, typo on my part I'm afraid - more haste, less speed

Are floatleft and right actually set to 'float'? if not, could you not set them to position:absolute; bottom: 0px; and the main to position:relative; ? Or if they have to be set to float, could you put in another div around floatleft and floatright with position bottom?

Don't know how or why, but even with the two inner divs set to float as before, setting "main" to relative and "floatright" to absolute with bottom set to 0 pixels has worked - it was only the "floatright" div that needed to be pushed to the bottom.

Checks out fine so far in Firefox, Opera, Seamonkey, Safari, IE7 and IE6.

Must confess I don't use absolute or relative positioning if I can help it - I find that most of the time the layouts I get given can usually be achieved with just floated divs.

Thank you to all who replied!