Question

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:

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.

Answer 1

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