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.