CSS Tables: Content Alignment

One thing that has always caused me grief when using CSS tables is the alignment of the content within cells.

In this specific case, I have two cells within the same row which should of course be horizontally aligned. But when the height of the content within these cells does not match, there seems to be vertical alignment issues. A watered down example of this is below:

[code=html]
<div class=”styleTable”>
<div class=”styleRow”>
<div class=”styleCell”>

<div>
<h1>Trololo Headline</h1>
<p>More content and such</p>
</div>

</div>
<div class=”styleCell”>

<div>
<p>Less content on the right</p>
</div>

</div>
</div>
</div>
[/code]

And of course the CSS for those classes:

[code=html]
.styleTable {
font-size: 12px;
width: 100%;
display: table;
margin: 0px;
padding: 0px;
}
.styleRow {
font-size: 12px;
display: table-row;
margin: 0px;
padding: 0px;
}
.styleCell {
font-size: 12px;
display: table-cell;
margin: 0px;
padding: 0px;
}
[/code]

In an example like this, with the addition of an <h1> tag on the left, the content in the left cell will force that cell to have a greater height, which in turn makes the cell on the right to align its content towards the center of the cell on the left. Thus you get one cell with normal looking content and the other is lowered, making things look wrong.

Any enlightment on a possible solution to this problem would be greatly appreciated as I seem to run in to it far too often now.

Also in #CSS _↴