ansaurus

Question

Answer 1

A:

Edit: @Breakthrough's answer seems like it does exactly what you want using just div's and CSS; I'll just leave my CSS-ified solution with Tables up as an alternative.

<html>
<head>
    <style type="text/css">
     #main { min-width: 800px; width: 100%; }
     #content { width: 500px; background: red; }
     .sidebar { background: blue; min-width: 150px; }
    </style>
</head>
<body>    
<table id="main">
    <tr>
     <td class="sidebar">Left</td>
     <td id="content">Center</td>
     <td class="sidebar">Right</td>
    </tr>
</table>    
</body>
</html>

Donut 2009-08-19 18:50:40

Answer 2

A:

Take a look at this article: http://www.alistapart.com/articles/holygrail/

It's the opposite of what you want (liquid middle, fixed outsides) but it will get you thinking and maybe lead you to the correct answer.

Jason 2009-08-19 18:52:38

Answer 3

+3 A:

Is there any particular reason you want to use div's over table cells in this case?

Regardless, I came up with a quick solution you might like:

<html><head>
<style type="text/css">
*         { margin: 0; padding: 0; }
body      { text-align: center; }
#content  { width: 500px; height: 100%; margin: 0 auto;
            text-align: left; background: #DDDDDD; overflow: auto; }
.column   { width: 50%; position: absolute; top: 0; height: 100%; }
#leftcol  { margin-right: 250px; background: #AAAAAA; height: 100%; }
#rightcol { margin-left: 249px; background: #AAAAAA; height: 100%; }
</style>
</head><body>
<div class="column" style="left:0;">
<div id="leftcol">This is the column on the left.</div>
</div>
<div id="content">Your content goes here.</div>
<div class="column" style="right:0;">
<div id="rightcol">This is the column on the right.</div>
</div>
</body></html>

I really minified it to fit nicely on here, but copy and paste that into a file and tell me what you think.

Just be forewarned: using tables is the preferred way to do this, and is perfectly acceptable. There is no problem mixing tables and divs, and styling/positioning tables with CSS. This solution is more of a "workaround", but one thing is for sure - it works.

Breakthrough 2009-08-19 19:08:37

wow. nice.

Jason 2009-08-19 19:13:30

Seriously. Veerrry nice.

Donut 2009-08-19 19:17:35

That is freaking genius. Good job! Sorry, as I'm learning more about CSS, I'm constantly discouraged by other developers to use tables. There's like this weird voodoo about using tables in a design.

TK Kocheran 2009-08-19 19:43:24

There are cases when it's good to use tables, and when it's good to use div's. The general thought on the internet is to only use div's... I would say to use div's, but if you absolutely need to use tables, go for it - especially in a case like this, where it'll be compatible with every single browser (more-so than advanced CSS tricks).It all depends on how complicated your layout gets.

Breakthrough 2009-08-19 19:58:29

ansaurus

tags:

views:

answers:

Aligning Divs with CSS

related questions