SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2009
    0 Post(s)
    0 Thread(s)

    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_____________
    | | |
    | 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; 
    /* 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' */
    Last edited by Paul O'B; Jul 14, 2011 at 01:39. Reason: code tags added and erroneous text removed

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    448 Post(s)
    8 Thread(s)

    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).

    Quote Originally Posted by alexv55 View Post
    get the title to stretch vertically
    Not sure what that means.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts