Wednesday, November 7, 2012

Holy Grail? Really, CSS People?

I recently had a website to build where the desired layout was three columns - left sidebar, right sidebar, and center content. The sidebars needed to be fixed width and the center content area needed to be liquid and resize itself to use the remaining available space. Pretty standard stuff, right?
Now, CSS has a lot of good points, and I try to be a good girl and drink the Kool-Aid when it makes sense, so I sat down and started making divs. And failed. And failed And failed. CSS just would not produce the result I wanted. So, I said to myself, "Self, there are people out there better than you are with CSS. Surely one of them have solved this!" To Google I went! Where I discovered that the CSS crowd considers this layout to be a "holy grail".

I read dozens of complicated methods for achieving this. I gave some of them a try, but most simply didn't work, or only worked for certain content. That's not such a big deal. All tools have their strengths and weaknesses. What did make me facepalm is the lengths these people are willing to go in order to avoid using the tool that is sitting right in front of them and achieves this effortlessly.



I've got your holy grail right here. It's called a table.

<table style="width:100%">
    <tr>
        <td style="width:200px">Left Sidebar</td>
        <td>Center Content</td>
        <td style="width:200px">Right Sidebar</td>
    </tr>
</table>


There. Grail found.