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