4

How can I create a layout that looks like this? (I'm willing to use tables!)

enter image description here

I used a table to make sure Col 1 and Col 2 were even, but now I can't figure out how to add the header / footer to the Col 2 <td>

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Tom Lehman
  • 85,973
  • 71
  • 200
  • 272
  • http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks – Jawad Jun 04 '11 at 20:09
  • @Jawad – is there any reason to prefer that hack to a table-based hack? I find tables to be a bit easier to understand (though still sub-optimal) – Tom Lehman Jun 05 '11 at 02:24
  • I too prefer table based layouts. The only thing going against it is that it is a " No No" in modern web devlopment. I find the below solution much better than the above link. Ther are other solution as well such as Javascript & JQuery. However somday you will have to move to CSS based laouts from Table based layouts. http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/ | http://abcoder.com/css/css-equal-height-columns/ – Jawad Jun 05 '11 at 16:14

1 Answers1

2

Purely because you've made it clear that you don't mind using tables for layout, here's a table based solution:

http://jsfiddle.net/mjQA3/

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="300" rowspan="3">Col 1</td>
        <td height="30">Col 2 Header</td>
    </tr>
    <tr>
        <td>Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br /></td>
    </tr>
    <tr>
        <td height="30">Col 2 Footer</td>
    </tr>
</table>
Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • I'd certainly *prefer* not to use tables, but if I'm going to need a CSS hack ANYWAY, I might as well use the easiest hack (which is usually a table). Would you use a different approach here? – Tom Lehman Jun 04 '11 at 19:39
  • Unfortunately this solution doesn't work in Chrome when Col 1 has much more content than Col 2: http://jsfiddle.net/mqNvX/ (image: http://cl.ly/040f22340H1M1z362c3q) – Tom Lehman Jun 05 '11 at 04:14
  • I can't seem to find a way to fix that in Chrome. I guess that's why I tend to go for CSS based solutions most of the time :) The problem with the CSS based techniques is that they all seem to have a (different) downside. So, a few questions: is this supposed to fill the viewport (never a vertical scrollbar on the page), or should there be a vertical scrollbar if there's loads of content? Which browsers/versions must be supported? Will this thing be filling the width of the viewport, or will it be fixed width and centered? I hope those questions make sense, if not I'll explain better. – thirtydot Jun 05 '11 at 04:56
  • "is this supposed to fill the viewport" – As more content is added, both Col 1 and Col 2 should stretch vertically to accommodate it. Neither column should ever contain a vertical scrollbar. Browsers: IE8+, Chrome, FF, Safari (IE7 would be nice too!). "Will this thing be filling the width of the viewport, or will it be fixed width and centered?" – neither; each of these will contain a "forum post" and there will be several on the page. I was able to make this work by adding a "spacer" `` at the bottom of Col 1, but this approach unnecessarily increases the height of Col 1 – Tom Lehman Jun 06 '11 at 01:30