Disregarding table layouts with CSS?…except in IE

Preface: The following demo yielded results that basically didn’t work in IE. Although a better man may be able to figure this out, I was not able to dedicate any more time to the subject. So unless you’re ok with that, or can help me get past it, you may want to save yourself some time.

I was recently asked by a client to simply “take that right column content and stick it UNDER the left”. Sounds simple enough, right? But what if you don’t have access to the table? What if all you had were styles you could manipulate to simulate a new row? Well damn. Sucks to be you.

1: Here’s the table structure we’re stuck with. One row. Two cells.

But what the client wanted was for the right hand column to be moved below the left hand column without editing the table. (For the sake of argument you can assume there were classes defined in the TD’s allowing us to have some CSS access.)

This is usually the place where I say “I’ll see what I can do”, knowing there’s nothing I can do. But I spent some time experimenting and the result was a solution that worked just fine…except in IE. Great. Things like this make me want to become a print designer.

2. So here’s my admittedly not very elegant solution.

I started with some styling of the table cells setting up the parental structure necessary to position the divs nested in each cell.
Table cell one:
<td style="position:relative; height:200px;" id="div-for-td1">
#div-for-td1 { width:960px; position:absolute; left:0px; top:0px; display:block; padding:0; margin:0; }

Table cell two:
<td style="position:relative; height:500px; overflow:scroll; margin-top:-200px;" id="div-for-td2">
#div-for-td2 { height:390px; width:620px; float:left; position:absolute; left:0px; top:210px; }

Basically that’s it. I’ve used the td styling to set up the relative positions, heights and behaviors, while the div id selector dictates the actual position and size.

A few things to note:
First: The second cell holds content of an undetermined height. However because the container is floated it loses its hasLayout property (see: On having Layout), which means that the markup of the page does not respect the  height of the div and the content below it will overlap show through this div. Obnoxious, right? Second: And since a simple clear style or clearfix (see clearfix) didn’t work, i had to limit the table cell’s height and cap the content with an overflow:hidden;
also because I’m basically tricking the browser into ignoring the markup of the table, I had to use the specified height from the first cell as a negative margin in the second cell. Otherwise the browser would apply the height from the first cell to the second as you may expect, creating a 200px gap above the content.

Again, I’m not saying this was impossible. But having spent a fair amount of time on it, I’d say your best bet is to keep it simple and avoid this technique.