SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,760
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Bottom Alignment in <div>

    I have my Company Logo (36px high) and a Welcome Message (0.8em high).

    Code:
    	<h1 id="homePage">
    		<span></span>Debbie's Company: Building Your Own Small-Business
    	</h1>
    
            <!-- Display Welcome -->
            <p id="welcome">
              <span id="hello">Hello.</span>
                <a href="">Log In</a> to access premium content.
                &nbsp; Not a Member? &nbsp;<a href="">Start Here</a>
            </p>

    The problem is that I need to vertically align each of these items, so that the bottom-edges are on the same line, but each has different heights so it is a pain using different margins/padding to line things up?!

    I gave my "welcome" a height of 36px too.

    Now I just want a way to "bottom-align" the "welcome" so that the bottom-edges match up. (Hope you can follow me?!)

    Thanks,


    Debbie

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've posted only a snippet of the html and not what else might be in the container holding those 2 items.

    But in any case, without seeing the rest of your html I normally use either margin-bottom: 0px or if I use css postioning, then I set bottom: 0px to vertically align elements.

    Both work for me.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Did you mean something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #homePage,#homePage span{
    	width:220px;
    	height:36px;
    	overflow:hidden;
    	position:relative;
    	display:inline-block;
    	vertical-align:bottom;
    	margin:0;
    }
    #homePage span{
    	background:red;	
    	position:absolute;
    	left:0;
    	top:0;
    }
    #welcome{
    	background:blue;
    	display:inline-block;
    	vertical-align:bottom;
    	margin:0;
    }
    * html #homePage,* html #welcome{display:inline}/* inline block fix for ie6*/
    *+html #homePage,*+html #welcome{display:inline}/* inline block fix for ie7*/
    
    
    </style>
    </head>
    
    <body>
    <h1 id="homePage"> <span></span>Debbie's Company: Building Your Own Small-Business </h1>
    
    <!-- Display Welcome -->
    <p id="welcome"> <span id="hello">Hello.</span> <a href="">Log In</a> to access premium content.
    		&nbsp; Not a Member? &nbsp;<a href="">Start Here</a> </p>
    </body>
    </html>
    It uses display:inline-block and vertical-align:bottom to align the elements. The problem is that if the text wraps then the p element will wrap as a block which may not be suitable. If the p element does not need any specific block styling then you could turn it into an inline element instead.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #homePage,#homePage span{
    	width:220px;
    	height:36px;
    	overflow:hidden;
    	position:relative;
    	display:inline-block;
    	vertical-align:bottom;
    	margin:0;
    }
    #homePage span{
    	background:red;	
    	position:absolute;
    	left:0;
    	top:0;
    }
    #welcome{
    	background:blue;
    	display:inline;
    	vertical-align:bottom;
    	margin:0;
    }
    
    
    </style>
    </head>
    
    <body>
    <h1 id="homePage"> <span></span>Debbie's Company: Building Your Own Small-Business </h1>
    
    <!-- Display Welcome -->
    <p id="welcome"> <span id="hello">Hello.</span> <a href="">Log In</a> to access premium content.
    		&nbsp; Not a Member? &nbsp;<a href="">Start Here</a> </p>
    </body>
    </html>


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
  •