title: 3 column CSS liquid layout, with left and right edges flush with edges of parent element?
body: <p>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.</p>
  
  <p>This sounds like it should be easy, but the best thing I can come up with is quite a hack.</p>
  
  <pre><code>&lt;style&gt;
  .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; }
  &lt;/style&gt;
  </code></pre>
  
  <p>...</p>
  
  <pre><code>&lt;span class="c3"&gt;
    &lt;span class="left"&gt; ... 
    &lt;/span&gt;
    &lt;span class="center"&gt; ...
    &lt;/span&gt;
    &lt;span class="right"&gt; ...
    &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>You can see it <a href="http://jsbin.com/eqavih/4/edit" rel="nofollow">here</a>, this works okay (in my browser at least) but it just feels wrong. Is there a better way to do this?</p>
  
  <p>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 <a href="http://gitbuh.github.com/decl/site/index.html" rel="nofollow">latest example</a> of where I've run into this (bottom of the page).</p>
  
  <p>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.</p>