Simple 3-column fluid layout, but center column empty with fixed-width?

Problem

Tricky to find the most cross-browser-compatible solution (IE6 included).

Three columns, the two on the sides are responsive and adjust with screen.

The middle column should be empty, but with a fixed width:

enter image description here

It's easy to make them all responsive: http://jsfiddle.net/Baumr/sZehH/2/ (in this case, the middle one isn't even a column but just a margin — which is nice).

<section> 
    <div>
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </div>
    <!-- Best if Column 2 is a margin or something -->
    <div>
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </div>
<section>

I've considered using position:, but it can get messy...

Any ideas? Thanks in advance.

Problem courtesy of: Baumr

Solution

What about using an inner element for spacing? Could be another DIV tag inside each column:

http://jsfiddle.net/sZehH/3/

HTML:

<section> 
    <div class="left">
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </div>

    <div class="right">
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </div>
<section>

​CSS:

section div {
    float: left;
    width: 50%;

}

section div p {
    background: pink;
    padding: 2.5%;    
}

.left p {
    margin-right: 20px;
}

.right p {
    margin-left: 20px;
}

I've used the paragraphs that where already there, but you probably will have more than one element, so you will have to add a wrapping element to account for that. ​

Solution courtesy of: rcdmk

Discussion

I suggest you to use a robust css framework like YAML.

It alows you to develop columnar an responsive layouts with 2 or 3 columns. So, instead of trying to solve the cross-platform issues, you could focus in arts and development.

Check this out: http://www.yaml.de/demos/flexible-columns.html

Discussion courtesy of: Daniel Lepe

I think the best solution is box-sizing. While it is not technically supported for older browsers, it does have polyfills.

Check out the fiddle To the following:

CSS (vendor prefixes excluded):

html, body {
    background: #000;
    height: 100%;
    width: 100%;
    color: #000;
}    

#columnOne, #columnTwo {
    width:50%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
}

#columnOne {
    float:left;
    border-right: 20px solid blue;
}

#columnTwo {
    float: right;
    border-left: 20px solid blue;
}​

HTML:

<html>
    <body>        

        <div id="columnOne">HI!</div>
        <div id="columnTwo">HI!</div>

    </body>
</html>  ​

More info here and info on polyfills here.

Have fun!

Discussion courtesy of: apttap

Given your strict browser support requirements you may need to use non-semantic tables. This table solution, though you might already know it, can be viewed on this JSFiddle or below. Oh, and I haven't tested it, but as far as I know all of this should be IE6 compatible:

HTML:

<table> 
  <tr>
    <td class="column">
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </td>
    <td class="center-column"><div id='ie6-fix'></div></td>
    <td class="column">
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </td>
  </tr>
<table>

​ CSS:

.column {
    background: pink;
}
.center-column {
    background-color: #eee;
    width: 100px;
    min-width: 100px;
}
#ie6-fix {
    width: 100px;
}
Discussion courtesy of: jmeas

This recipe can be found in it's original form on Stack Over Flow.