2-col CSS layout with background colors that fill full height?

Question

I've had a reasonable amount of exposure to CSS layout.

I've looked at quite a few CSS layouts for 2 or 3 column layouts, and having a hard time to just find even just a reliable 2 column that allows me to do the following:

what I want:

• each column has its own background color
• i want the background column to fill the full height of the page
• i dont know which column will contain most text so each column must resize independently

of all the layouts i've found - or attempted myself they all have one of these problems

• an image is needed for the background (somewhat clever but yuk!)
• the background color only fills the full height if that column is the longest

I'm very tempted to just revert back to <TABLE> which I can reliably implement in about 3 lines of code.

Answer 1

If you have a problem with the image-background, what on earth would justify using tables? It seems very backwards to me. The image-background gives you proper markup, the desired effect, and has cross-browser compatibility.

You could use Javascript - but that is really not necessary.

Answer 2

I spent (wasted) a lot of time looking for a nice CSS solution to this. Dude, use a table. We won't tell anyone.

Answer 3

If faux columns isn't your thing try multi-column layouts.

Here's an example to use: http://pastry.se/7772/

Remove content from either block (there's plenty of it) to try it out.

This was always a thing I had trouble with - I'd advise you to bookmark A List Apart and have a look through some of the articles in the CSS category. They have some excellent tutorials and writeups there for frontend coders (things like CSS sprites, liquid layouts, fonts etc.).

Answer 4

Unless you use a fixed height (probably not a viable solution) or use the faux-column technique by using a background image (which you've already labeled as a problem), you're pretty much out of luck.

The faux-column technique is widely used and is functional cross-browser. Why is that not a viable solution for you?

Answer 5

If I have your question correct, your layout should be as simple as:

 <div class="wrapper">
    <div class="col1">Blahblah</div>
    <div class="col2">Blahblah</div>
    <div class="clear"></div>
 </div>

styles.css:

 .wrapper { background-image: url(imageTile.gif); background-repeat: repeat-y; }
 .col1 { float: left; width: 100px; margin-right: 20px; }
 .col2 { float: left; width: 100px; }
 .clear { clear: both; }

Forget a table, IMO this is much easier. Heights will flex with content. The imageTile.gif should be a 1px by [x]px slice of the background color, where [x] is the width of the page.

Answer 6

I have succesfully implemented the method explained in http://www.ejeliot.com/blog/61 under the title "Another Way"

Answer 7

This is not a hard problem to solve, so I don't advise you go back to tables. I am a bit confused on what exactly you want though, so let me try to help you in the best way that I can.

<div class="a">Text A</div>
<div class="b">Text B</div>

With CSS:

html, body
{
    height: 100%;
}

.a
{
    width: 50%;
    height: 100%;
    min-height: 100%; /* For IE */
    background-color: red;
    float: left;
}

.b
{
    width: 50%;
    height: 100%;
    min-height: 100%;
    background-color: blue;
    float: left;
}

That will give you something like this: for-simon.html

Is that what you are looking for?

Answer 8

I don't really endorse this option, but you may want to check out example 7 here if you're open to a JavaScript based solution.

http://www.html.it/articoli/niftycube/index.html

Answer 9

View the source for answer:

alexandergutierrez.info/