Simple 3-way layout

Question

I have a simple three-column template that I cannot make work. It will probably be very easy for most of you, but for some reason I cannot get it to work.

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

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

the violin looks like crap, but basically the left / right column should decrease to the minimum width, and then start reducing the middle down, and all containers should remain at a distance of 30 pixels between each other ... right now, when it falls into the min-width of the second / the middle container moves along the first container when resizing the browser window, I need the box to stay in place, just keep decreasing ... as if both sides should be squeezed into the middle container

trying to do this with css only, so that if possible there is no third party, I know things like the perfect arrangement of three columns and bootsrap, but I feel like I need a clean css solution for this!

Answer 1

I would advise you to use css display: table and display: table-cell , which are widely used. Here you are working with a 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 allows you to have a width in %

Answer 2

There are some syntax issues in CSS, for example display:float:left; will do nothing. In addition, you cannot have fixed margins and widths defined as a percentage, since you do not know if this remains on the screen even on the screen.

This is the result you need - http://jsfiddle.net/x7Atq/7/