Aligning text question

HTML & CSS
1

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:D

<!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

[font=verdana]The quick’n’easy way is to add

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.[/font]

3

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:


<!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

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

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:


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

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

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 :smiley:


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