bottom align div next to floated divs
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">to开发者_JAVA百科p 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;
}
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.
精彩评论