SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning text question

    Hey hope things are going well, I was have a problem while working on page layout so I isolated it. Basically I want the text to align to the bottom of the colored box. Heres the code so help me with some ninja CSS
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Example</title>
    <style>
    header{
    	display: block;
    	background: #CC3;
    	overflow: auto;
    	}
    	
    header img{
    	height: 60px;
    	width: 256px;
    	float: right;	
    	}
    header h2{
    	margin:0;
    	padding:0;
    	}
    </style>
    </head>
    <body>
    <header>
      <img class="table-cell" src="media/ad.gif" alt="advertisement"/> 
      <h2>Travel Guide</h2>
    </header>
    </body>
    </html>
    Thanks, a example is found on this page.

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,837
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    The quick'n'easy way is to add
    Code css:
    header h2 {line-height:60px;}
    However, you need to understand that that will override any change in content or font size - in other words, if a reader bumps the font size up to 80px, it will be cropped to fit in a 60px high box, and if the text wraps onto a second line, that second line will double the height of the coloured box. So it's not a perfect solution by any means (other smarter people may be along shortly with something better) but if the text is unlikely to ever out-grow the box then it should do the job.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,741
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    based on the code provided , you could give the H2 display:inline-block; and then use a pseudo element ( since floating the IMG takes out of the regular flow). The pseudo element should be of equal height to your image.

    So the code would look something like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Example</title>
    <style type="text/css">
    header{
    	display: block;
    	background: #CC3;
     	line-height:  1;}
    header:after{content:""; display:inline-block; width: 1px; margin-right: -1px; vertical-align: middle}
    header img, header:after{
    	height: 60px;}	
    header img{
    	width: 256px;	
        float:right;
    	}
    header h2{
    	margin:0;
    	padding:0;
    	display:inline;
    	vertical-align: middle;
    	line-height: 1.2 ; /* optional*/
    	}
    </style>
    </head>
    <body>
    <header>
      <img class="table-cell" src="media/ad.gif" alt="advertisement"/> 
      <h2>Travel Guide</h2>
    </header>
    </body>
    </html>
    hope that helps

  4. #4
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks for guiding me in the right direction. Switching the HTML around and using table CSS was my solution for align the text to the bottom of the div. You can check out the exact code it is updated.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,741
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    I would advice against the use of display-table for this when there are some valid solutions. Besides, IE ( and uder do not understand display:table at all!

    Another SIMPLE, and cross browser friendly way to tackle this is:
    Code:
    header{
    	background: #CC3;
    	text-align: right;
    	padding-right: 256px;
     	}
      header img{
    	width: 256px;
    	height: 60px;	
    	vertical-align: bottom;
    	margin-right:-256px;
     	}
    header h2{display: inline-block;  width: 100%;   margin:0   ; padding:  0 ; text-align: left  }

  6. #6
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That does not align the text to the bottom of the green box. But hey, if IE 7 will use "display:table" properly then I should be fine, plus I could use something like modernizer to reach that 1% who use under internet explorer 7 right?

  7. #7
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After doing a little more research I completed this problem without using any tables. Thanks for the help I wouldn't have been able to do it with out you guys/girls. Let me know if their is any quirk I should fix or anything fun
    HTML Code:
    header{
    	background: #336633;
    	padding-right: 256px;
    	overflow: auto;	
    	position: relative;
    	display: block;
    	}	
    header img{
    	width: 256px;
    	height: 60px;
    	margin-right: -256px;
    	float: right;
    	}
    	
    header h2{
    	margin: 0;
    	padding: 0;
    	bottom: 0;
    	position: absolute;
    	}	


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
  •