SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    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 ________________________________|_________

    Code:
    <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 -->
    Code:
    #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;
    }
    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
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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).

    Quote Originally Posted by alexv55 View Post
    get the title to stretch vertically
    Not sure what that means.


Bookmarks

Posting Permissions

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