3 column CSS liquid layout, with left and right ed

Question

How can I create a 3 column CSS layout, with the left and right edges flush with edges of parent element? I want to be able to do this within a liquid layout, so no fixed widths.

This sounds like it should be easy, but the best thing I can come up with is quite a hack.

<style>
.c3 { display:block; text-align:center; }
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; }
.c3 .left { float:left; }
.c3 .right { float:right; }
</style>

...

<span class="c3">
  <span class="left"> ... 
  </span>
  <span class="center"> ...
  </span>
  <span class="right"> ...
  </span>
</span>

You can see it here, this works okay (in my browser at least) but it just feels wrong. Is there a better way to do this?

Since there seems to be some confusion about what I'm trying to do, here it is in context. I run into this fairly often, where I already have a page layout and I want three columns within that layout. I want the three columns to be "fully justified," and I want things to be liquid, because even thought the page has a fixed layout, there's usually a facebook app or something also and I like to reuse as much as possible. Here's the latest example of where I've run into this (bottom of the page).

I'm not worried about SEO, the content is usually in 1-2-3 order of importance. I don't really care if they're all the same length. I'd like to not use a ton of markup if possible. My main goal is to have the left and right edges flush with the parent element, and and equal amount of space between each column.

Answer 1

This might be what you want/help you; I've made a layout that uses css to emulate dynamic table behaviour [using divs]. It works in Chrome, Firefox and IE>7.

DEMO, have a go at resizing the window. That middle bit is what you want, I think.

Have a fiddle with it. Uncomment the border css line to see whats going on.

Code:

<div class="view" style="height:100%; width:100%">
    <div class="north">
        n
    </div>

    <div class="middle">
        <div class="west">
            w
        </div>

        <div class="centre">
            c
        </div>

        <div class="east">
            e
        </div>
    </div>

    <div class="south">
        s
    </div>
</div>

html, body {
    height : 100%;
    margin : 0;
}

.view,
.view > .middle {
    display : table;
}

.view > .north,
.view > .south {
    height : 1px;
    display : table-row;
}
.view > .north { vertical-align : top; }
.view > .south { vertical-align : bottom; }

.view > .middle > div {
    display : table-cell;
}
.view > .west,
.view > .east {
    width : 1px;
}

/*div { border : 1px solid black; }*/

Simple markup, no JS, and dynamic layout.

Answer 2

As far as I can tell, the solution I gave in the question is the best answer for this. I haven't found any other suggestions since posting this that would achieve what I want.

I'll reiterate it here so the question can be closed.

<style>
.c3 { display:block; text-align:center; }
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; }
.c3 .left { float:left; }
.c3 .right { float:right; }
</style>

...

<span class="c3">
  <span class="left"> ... 
  </span>
  <span class="center"> ...
  </span>
  <span class="right"> ...
  </span>
</span>

Answer 3

I could try to write a new layout for you or fix the one you started, but I feel like I should just point you to a good source for the layout you're after:

The Perfect 3 Column Liquid Layout (Percentage widths)

No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser & iPhone compatible.

http://matthewjamestaylor.com/blog/perfect-3-column.htm

I have used this resource for many years and it's rock solid, even in IE6. Make sure to click around to see all the examples, and read the article so you understand how it works.

This is an image of the basic layout structure (not the actual output):

It uses some crafty relative positioning and SEO-friendly 2-1-3 source order. Full height faux columns, fixed-width or fluid columns...

I cannot recommend this resource enough, I hope you enjoy it.

---

OK, sounds like you just want a lightweight alternative to your already-working solution.

Per our discussion in chat, I'm posting the mini-template I created:

<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div class="last">3</div> <!-- or use CSS3 :last selector -->
</div>

.wrapper {
    width:500px; /* any width OK */
    float:left;
}

.wrapper div {
    width:30.65%; /* not perfect, but close */
    padding:1%;
    margin:0 0 0 1%;   
    float:left;
}

.wrapper div:first-child { margin:0; }

 /* make up for imperfect 1/3 width rounding */
.last { float:right;margin:0 }

Demo: http://jsfiddle.net/bH8vY/2/

Best of luck.