bottom align div next to floated divs

[alexv55]

I am trying to get the following effect using css. I am trying to get bottom edges of title and 'right text' to align with logo's bottom edge, and get the title to stretch
vertically. I have included html and css
__________________________________________________________
| |__________________________________top_____________
| | |
| logo | Title | right text
| |________________________________________|
|_______|___menu ________________________________|_________

<div id="wrapper">

    <div id="logo"><img src="some.gif" width="193" height="77" /> </div> 
    <div id="top_text">top text</div> 

    <div id="right_text"> right text </div> 

    <div id="middle">

    <div id="title">title</div> 
    <div id="menu">menu</div> 

    </div>  <!-- middle -->

</div> <!-- wrapper -->

#wrapper {
 width: 100%;
}

#logo { 
    float: left;
    border-right:#FFFFFF thin solid;
}

#top_text { 

    text-align: right;
    width: auto;
}


#right_text  { 
    float: right;
    border-left:#FFFFFF thin solid; 
}


#middle{
/* may be needs some sort of height */
}

#title {
/* not sure how to put here */
}
#menu { 
/* doesn't line up with bottom edge of logo and 'right' */
    vertical-align:bottom;
}

[ralph.m]

For

logo | Title | right text

you could use an unordered list, with the LIs set to display: inline and vertical-align: bottom.

Or you could place image and links in a <p> element, with the image vertical-align: bottom (but not as good).

get the title to stretch vertically

Not sure what that means.