Aligning text question

**polyhedra** · Nov 13, 2012 12:14

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.

**Stevie D** · Nov 13, 2012 13:42

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.

**dresden_phoenix** · Nov 13, 2012 19:11

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

**polyhedra** · Nov 14, 2012 14:06

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.

**dresden_phoenix** · Nov 14, 2012 23:46

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  }

**polyhedra** · Nov 15, 2012 07:47

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?

**polyhedra** · Nov 15, 2012 10:07

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

User Tag List

Thread: Aligning text question

Thread Tools

Display

Aligning text question

Bookmarks

Bookmarks

Posting Permissions