浮动 div 旁边的底部对齐 div

Question

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_TEXT_________________
          |                                                                    |
   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;
}

Answer 1

In your case I guess vertical align would not be helping you. Rather you need to align your HTML more semantically so that you could use Position:relative,top and left or Margin-top/Margin right handy to align it.

Following Pseudo code Steps might be useful for you to align it.

Step 1: Try Defining logo in a container or float it alone left

Step 2: Trying defining a section comprising of three different sections top text,title and menu and float the outer parent section as well left.

Step 3: Try defining a right section and float it right

Step4: Position all the elements using Position:relative,top and left or Margin-top/Margin right

The above steps would be helping you to get a picture perfect layout rather fiddling around with Vertical-align.

If you need further help on vertical-align here

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Hope this answer helps.

Good luck.. happy coding.