CSS/HTML types ... how do I pull this off?

Factual Questions
1

A pretty simple situation: flowing a column of text into a table cell. No biggie. I can style the various body and header text elements appropriately in terms of margins, font, size, color, weight, etc.

But I need the baseline of the last line of the first header to rest at a specific location on the page. Observe here. It needs to sit 10px above the edge of that gray bg area. The problem is that I never know how many text lines that header is going to take up–could be one, two, three, or four.

Now, the easiest, surest way would be to create another cell at the top there, make the bg gray, valign the cell contents to the bottom, and set the appropriate margins/padding in the CSS stylesheet. But I’d like to keep this as one column, not broken up by additional cells (it will make the code that writes the stuff in much easier to pull off, for one thing). How can I best achieve this?

2

Don’t use a table.
I made this up in about 5 minutes, but it should get you most of the way. You might need to set a line-height on the h1’s. Also, if you want to make it ‘more correct’ you’ll want to move the first h1 into the post div and give it a different class.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Testcase</title>
    <style type="text/css">

      div.news {
        background-color: #5C5C5C;
        width: 180px;
      }
      
      div.news h1{
        color: #00F;
        padding-top: 50px;
        margin-bottom: 0;
        padding-bottom: 10px;
      }
      
      div.news .post{
        background-color: #FFF;
        background-image: url(http://www.google.com/intl/en_ALL/images/logo.gif);
        background-position: bottom center;
        background-repeat: no-repeat;
        padding-bottom: 110px;
      }
      
      div.news .post h1{
        margin: 0;
        padding: 0;
      }
      
      div.news h2{
        color: #5C5C5C;
        font-size: .9em;
      }
      
      div.news p{
        margin: 0;
      }
    
    </style>
</head>
<body>

<div class="news">
<h1>Blog Entry Top Headline</h1>
  <div class="post">
    <h2>September 2, 2007</h2>
    <p>
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      <a href="http://www.google.com">(More)</a>
  </div>
  
  <div class="post">
    <h1>Blog Entry Second Headline</h1>
    <h2>September 1, 2007</h2>
    <p>
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      <a href="http://www.google.com">(More)</a>
    </p>
  </div>

</div>

</body>
</html>
3

Thanks! I think I can work with that.

4

You can only have one <h1> header on a web page for proper validation and usability. My suggestion should be listed as:

<div class=“news”>
<h2>Blog Entry Top Headline</h2>
<div class=“post”>
<h3>September 2, 2007</h3>
<p>
Body Text Goes here.
Body Text Goes here.
</p>
</div>
<div class=“news”>
<h2>Blog Entry Top Headline</h2>
<div class=“post”>
<h3>September 2, 2007</h3>
<p>
Body Text Goes here.
Body Text Goes here.
</p>
</div>

5

Oh pooh, like that matters to anyone.

6

I’ve been messing with this some more, and it looks like this is not what I need. I stated my positioning problem inaccurately. I don’t need the bottom of the text to be 10px above the bottom of the gray box. I need the bottom of the header’s last line–whether the header has one line or four lines–to be 10px above the bottom of a 115px-high gray box.

In other words, the real problem is: How, using CSS, do I vertically align text at the bottom of a 115px gray box?
Leaving aside the 10px bottom padding/margin, the table-based HTML analogue to this would be:



<table>
 <tr height="115">
  <td valign="bottom" bgcolor="#E7E7E7">Header here</td>
 </tr>
<table>

In Yag’s solution, as more lines of text are added, the gray box expands downward. I don’t want this to happen; I want it to remain fixed in size, and have additional lines of text push themselves upward.

7

Could you link to the h1 thing? The html/css I provided validates according to 4.01 strict and the w3c validator. I realize that certain search engines/non-standard browsers co-opt h1 to mean page header, but I don’t recall anything official.

The following will work to grow the text up, to a point. If the text ever goes above 128px tall, then it will display on top of the stuff above it, or off the top of the screen.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Testcase</title>
    <style type="text/css">

    div.news {
      width: 180px;
    }
      
    div.news .post{
      background-image: url(http://www.google.com/intl/en_ALL/images/logo.gif);
      background-position: bottom center;
      background-repeat: no-repeat;
      padding-bottom: 110px;
    }
      
    div.news .post h1{
      margin: 0;
      padding: 0;
    }
      
    div.news h1{
      color: #00F;
      font-size: 1.5em;
    }
      
    div.news h2{
      font-size: .9em;
    }
      
    div.news p{
      margin: 0;
    }
    
    div.top_headline{
      position: relative;
      height: 128px;
      background-color: #5C5C5C;
    }
    
    div.top_headline h1{
      position: absolute;
      bottom: 0;
      left: 0;
    }
    
    </style>
</head>
<body>

<div class="news">
  <div class="post">
    <div class="top_headline">
      <h1>Blog Entry Top Headline<br>Another Line</h1>
    </div>
    <h2>September 2, 2007</h2>
    <p>
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      <a href="http://www.google.com">(More)</a>
  </div>
  
  <div class="post">
    <h1>Blog Entry Second Headline</h1>
    <h2>September 1, 2007</h2>
    <p>
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      Body Text Goes here.
      <a href="http://www.google.com">(More)</a>
    </p>
  </div>

</div>

</body>
</html>
8

Quite a few people, actually, including many federal governments, state governments, businesses, etc.

9

Considering some high profilet sites often can’t be bothered using code that’s cross-browser compatible, whether H1 is used once per page is hardly an issue that will make or break a site.

10

It can if they get hit with an ADA lawsuit. Just ask Target. If a corporate web owner is sloppy at its HTML coding, it’s probably sloppy at its accessibility requirements.

11

*Yag Rannavach ** nailed it in his post and its actually pretty simple.

Basically you create a relatively positioned element (which has the height) with an absolutely positioned child (which you give a bottom: 0 css value to) which therefore inherits that height.

Or, given that code speaks louder than words:


<!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>
<style type="text/css" media="screen">
<!--
* {
	margin:0;
	padding:0;
}
#greybox {
	width:180px;
	height:115px;
	background:#e7e7e7;
	position:relative;
}
#greybox div {
	position:absolute;
	bottom:0;
	left:0;
}

h1 {
	font-size: 1.2em;
	color: #4673ae;
}
-->
</style>
</head>

<body>
	<div id="greybox">
		<div>
			<h1>This is a header</h1>
		</div>
	</div>
</body>
</html>

the above is viewable here

Note that I’ve used a “div within a div”, as opposed to Yag Rannavach’s cleaner “h1 within a div” method. Its just personal preference really (i’d do it to allow content other than the h1 to be included if necessary).

It’s been tested in IE6, IE7 and FF2. Any questions, drop me an email - I’m always happy to help.

There’s nothing official on it AFAIK but i must admit i’ve found myself leaning towards the “one h1” approach where it doesn’t interfere with the site too much.

It’s more “best-practice” than anything else and I take a pragmatic approach to it, considering it on a site-by-site basis.

*may be a lie - since it relies on understanding the whole relative/absolute thing which a lot of people don’t

12

Superb! Thanks, Yag and Garius.