简单的3列响应式布局

Question

I have a simple three column layout that I cannot seem to get working. This will probably be super easy for most of you but for some reason I cannot get it working.

<div>min-width</div><div>stay in center</div><div>min-width</div>

here is the jsfiddle - http://jsfiddle.net/x7Atq/

the fiddle looks like crap but basically the left / right column should size down to the min-width then start shrinking the middle down and all the containers should stay 30px margin between each other...right now when it hits min-width the second / middle container moves over the first container as the browser window is resized, I need the box to stay put, just keep getting smaller...as if the two sides were to smush in on the middle container

trying to do this with just css so no third party anything if possible, I know of things like the perfect three column layout and bootsrap but I feel like there has to be a pure css solution for this?!

Answer 1

I'd advice you to use the css display: table and display: table-cell wich are widely underused. Here's you working simplified fiddle: http://jsfiddle.net/u5nR2/1/

HTML:

<div class="container">
    <div class="one">
        <div>one</div>
    </div>
    <div class="two">
        <div>two</div>
    </div>
    <div class="three">
        <div>three</div>
    </div>
</div>

CSS

html, body{height:100%;}

.container{
    width:100%;
    height:100%;
    display: table;
}
div > div {
  display: table-cell;
}
.one {width:15%; background:#ccc}
.two {width: 60%; background:#cba}
.three {width: 25%; background:#ca8}

This does allow you to have width in %

Answer 2

There are some syntax issues in your CSS, for example display:float:left; won't do anything. Also, you can't have a fixed margin and widths defined in percentage as you wouldn't know if that much space is even left on the screen or not.

Is this the result that you wanted - http://jsfiddle.net/x7Atq/7/