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.
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.
…