ansaurus

Question

Answer 1

+1 A:

I think you'll find a good example here: http://matthewjamestaylor.com/blog/perfect-3-column.htm (it sounds like you may not have much content in your 3 column layout, but it is basically a '3 column layout') The examples should be able to be modified to have the center panel have a fixed width while the others adjust.

Edit: This one in particular seems to be what you're looking for: http://matthewjamestaylor.com/blog/split-page-3-column-liquid-layout.htm

quoo 2010-10-12 19:05:18

That tutorial seems to revolve around all columns adding up to 100%. With a fixed column width in the center the outer columns would have to adjust their percentages accordingly. Guess I could do that with JS but I can't imagine this is an uncommon senario.

emachine 2010-10-12 19:09:57

The "split-page" layout linked above should be what you're looking for. There shouldn't be a need to use js.

quoo 2010-10-12 19:45:42

Answer 2

A:

There are a couple ways to do this:

Have 3 divs: left, center, and middle, each with their own background color/image.
Set a single background image on an element behind all 3 divs. This image could repeat vertically. In your case, I'd also set the background color to black, so that the left and right column expand. (More on Faux columns: http://www.alistapart.com/articles/fauxcolumns/)
Also check out Sliding Doors (http://www.alistapart.com/articles/slidingdoors/) for a more flexible middle column.

KatieK 2010-10-12 19:09:54

Hmm, the single image suggestion seems to be the closest however I'm set on having 3 divs with 3 images. Need to know how to flex the left and right to cover the page equally while the center column stays at a fixed 1000px.

emachine 2010-10-12 19:16:16

Answer 3

A:

Well, that was interesting. I think this does what you're looking for:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <!-- Marc Thibault [email protected] --> 
    <title>Three accordion columns</title>

    <style>
        * {
            margin: 0; padding: 0;
        }

        #wrapper {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100%;
        }

        #left {
            position: absolute; left: 0; top: 0;
            height: 100%;
            width: 50%;
            background-image: url(http://cnews.canoe.ca/CNEWS/Large_Format_Pix/POD/2010/10/12/750_police_women.jpg);
            background-color: yellow;
            background-repeat: repeat-y;
            z-index: 5;
        }

        #center {
            position: absolute; right: 0; left: 0; top: 0;
            margin: 0 auto;
            width: 600px;
            height: 100%;
            color: white;
            background-image: url(http://cnews.canoe.ca/CNEWS/Large_Format_Pix/POD/2010/10/11/cnews11thisone.jpg);
            background-color: blue;
            background-repeat: repeat-y;
            z-index: 10;
        }
        #right {
            position: absolute; top: 0; right: 0;
            width: 50%;
            height: 100%;
            color: white;
            text-align: right;
            background-image: url(http://cnews.canoe.ca/CNEWS/Large_Format_Pix/POD/2010/10/10/750_jerk_gets_bit.jpg);
            background-color: green;
            background-repeat: repeat-y;
            background-position: right top;
            z-index: 5;
        } 


    </style>

</head>
<body>
    <div id="wrapper">
        <div id="left">
            <p>This is Left</p>
        </div>
        <div id="right">
            <p>This is Right</p>
        </div>
        <div id="center">
            <p>This is Center</p>
        </div>
    </div>
</body>
</html>

Marc Thibault 2010-10-14 00:25:05

ansaurus

tags:

views:

answers:

Three background images

related questions