Dynamic size, two column layout with one column vertically and horizontally aligned, legacy browser support - css

Question

I am trying to create a two column layout, with content in column 1 both horizontally and vertically aligned in the middle, whereby the content of column 2 will vary in size. The width of both columns is fixed to 50% of the width of the screen.
In modern CSS complaint browsers I can simply do the following:
CSS:
#wrapper
{
display: table;
width: 100%;
/* for illustration purposes */
background: #ddd;
}
#left-column
{
display: table-cell;
width: 50%;
text-align: center;
vertical-align: middle;
/* for illustration purposes */
background: #fdd;
}
#right-column
{
display: table-cell;
/* for illustration purposes */
background: #ddf;
}
HTML:
<div id="wrapper">
<div id="left-column">
<p>I am both horizontally and vertically centered in column 1</p>
</div>
<div id="right-column">
<p>I am dynamic content in column 2, i.e. my size will vary</p>
<p>I am dynamic content in column 2, i.e. my size will vary</p>
<p>I am dynamic content in column 2, i.e. my size will vary</p>
<p>I am dynamic content in column 2, i.e. my size will vary</p>
<p>I am dynamic content in column 2, i.e. my size will vary</p>
</div>
</div>
However, the bad news is I also need this to work in IE6, and IE7...
The solutions I've seen so far are quite ugly and involve lots of nested divs. What's the cleanest way to achieve this so that it will work in all browsers? I've experimented with float: left, for the two column layout, but my main problem is the vertical alignment in the first column.
PS. I don't want to use tables for the layout, although it does work, it's bad for screen readers and therefore breaks my accessibility guidelines.
Thanks in advance!

Answer 1

With static content on the left-hand column, your solution is simple: use fixed heights and padding.
CSS
#left-column {
height: 50%; /* adjust height dependent on N&S padding */
padding: 20% 0; /* adds north and south padding to "center" #left-content */
}
#left-content {
height: 10%; /* adjust to exactly fit content */
text-align: center;
/* basically for testing, this will help us find the ideal
* percentage for our #left-content height. */
overflow: hidden;
background-color: red;
}
HTML
<div id="left-column">
<div id="left-content">
your image and text goes here
</div><!-- /left-content -->
</div><!-- /left-column -->
In your CSS, you will need to adjust the heights and paddings to achieve your desired result.
I would suggest ensuring the content in #left-content is 100% responsive. This may not be a 100% solution, but with some work on it (#media queries, etc), you should be able to achieve your goal in every browser and viewport size. The only thing I can think of off the top of my head that might break something like this is user-increased font size.

Answer 2

Unfortunately vertically centering something is either going to take javascript or a few ugly nested divs. If you are a maniacal purist I would recommend a float left, top aligned left column and enhance with javascript to be pushed to center.
That said, a couple wrapper divs never killed anyone.

Answer 3

Cracked it, I think... Html as in the original post, and CSS as follows:
#wrapper
{
width: 100%;
overflow: hidden;
position: relative;
/* for illustration purposes */
background: #ddd;
}
#wrapper p { font-size:1em; margin: .5em; }
#right-column
{
margin-left: 50%;
overflow: hidden;
/* for illustration purposes */
background: #ddf;
}
#left-column
{
width: 50%;
height: 2em;
position: absolute;
left: 0;
top: 50%;
margin-top: -1em;
text-align: center;
/* for illustration purposes */
background: #fdd;
}
The margin on the inner <p> tag needs setting so that we know what the height will be (the different browsers seem to default the margin of a <p> differently if you don't explicitly set it), I used em so that it scales nicely on different displays.
It's funny how something this simple can be such a pain to achieve... I'm still not 100% happy with it as if the content of column 1 wraps on a small display (or minimised window), then it won't be vertically aligned properly...