I've been out of the game for a while but I've finally got around to redoing my website after five years.

Each page on my new site will have a subheader with a big page title, a vertical line and then a short description of the page. Since each title is of a different length I need both columns to be fluid. Suffice it to say, this does not appear to be a very pervasive need because I couldn't find any guides on the subject. I tried a number of things without any widely-compatible success. After struggling with floats and other crap, I finally tried display:table values which immediately gave me the desired result... except in internet explorer, which does not recognize CSS table values. Since I can't really ignore IE, I need to replicate the effect without the display values I've used. I'd greatly appreciate any help that could lead to a solution to this "problem."

Here's the code that works in every browser except IE 7 and below.

    <div class="contentPageHeaderContainer">
      <div class="pageTitleContainer"><span class="pageTitle">VAIO&nbsp;Wallpapers</span></div>
      <div class="pageDescription">
        Mr. B's Domain is the personal website of Brian Bennett, professional student and aspiring renaissance man.
        It documents my dabbling in <a href="portfolio.php">web design</a>
        and <a href="/gallery2/">photography</a> as well as my <a href="news/archive.php">daily activities</a>.
        This website also hosts the best collection of <a href="vaio_wallpapers.php">VAIO wallpapers</a> on the internet.
      </div>
    </div>

The CSS...

.contentPageHeaderContainer {
width: 990px;
display: table;
}

.pageTitleContainer {
display: table-cell;
vertical-align: middle;
text-align: left;
padding: 0 20px 0 0;
margin: 0;
border-right: 2px solid #285066;
}

.pageDescription {
display: table-cell;
vertical-align: middle;
width: 100%;
text-align: left;
padding: 0 0 0 20px;
margin: 0;
}

You forgot to post the <div class="contentPageHeaderContainer"> in your html code, but however.

.contentPageHeaderContainer {
width: 990px;
display:block;
}

.pageTitleContainer {
display: block;
text-align: left;
padding: 0 20px 0 0;
margin: 0; 
float:left;
}

.pageDescription {
border-left: 2px solid #285066;
display: block;
text-align: left;
padding: 0 0 0 20px; 
margin: 0; 
float:left;
}

I always use float's for columns, so the above would be the way I would do it. But ofcourse the divs don't have the same height anymore!
I think the only way to "really" behold the heights is with tables or display:table ...

Try using/hi-jacking the templates here:
http://blog.html.it/layoutgala/
It may well help you.

@bas - I had partial success with your code. It's not working in Firefox though so i'm going to play with it some.

@FoundationFlash - Thanks for the link but it did I did not find anything helpful. It did reinforce my point that this is not very common, however. That page has 40 different layouts and not one fits the bill .

I'm not sure I understand exactly what the problem is, it's difficult when there's no visual to know what you're dealing with. I have several sites that use sub-headers on interior pages that are different from the main page, and I don't need to mimic table behavior to do it.

The webpage in question is at http://mrbsdomain.com/index2.php

At the top you see "Welcome," the vertical line and a page description. Each page on my website will have it's own title. Since each title is of a different length I need fluid widths for both sides, which is why I think I need the table-like flexibility.

I reluctantly elected to just encapsulate the two DIVs (now display:block in a table since it works in every browser and it validates as xhtml strict.

Ok, I don't see that what you want is so difficult. You set up the structure in divs rather than tables and use percentages for the widths. Since your #contentContainer is set to a fixed width anyway, I don't see a problem with using percentages.

...the width of the title column would have to vary from 20-50%, I can't have a fixed value like that.

You already HAVE a fixed value on #contentContainer so you're limited by that as it stands now. Put a percentage width on the 1st column with the "welcome" in it, and leave the other column to fill the remaining space.

There are times when you have to give up the idea of being so rigid in your thinking when it comes to web design.