1

The left and right columns are fixed width: 180px and 200px respectively, and the middle column is liquid, expanding to fill the available space.

I don't know how to make the div become column, I used tables before!

Please help.

George G
  • 7,443
  • 12
  • 45
  • 59
Ken Le
  • 1,787
  • 2
  • 22
  • 34
  • google... learn css (display, positioning, box model etc)... try something then get back to stackoverflow for help. – gp. Oct 04 '14 at 11:29
  • 3
    http://jsfiddle.net/webtiki/b0d7fn1z/ – web-tiki Oct 04 '14 at 11:33
  • 1
    Your *question* is not code. Please don't make it harder to read, and therefore harder to help, than it needs to be. – David Thomas Oct 04 '14 at 11:34
  • Have you looked at [How to make 3-Column layout with fluid center](http://stackoverflow.com/questions/18420917/how-to-make-3-column-layout-with-fluid-center-without-floats)? – Hashem Qolami Oct 04 '14 at 22:50
  • This does exactly what you want, and works for fluid layouts http://stackoverflow.com/questions/4873832/make-a-div-fill-up-the-remaining-width/22719552#22719552 – Adriano Mar 02 '16 at 11:52

3 Answers3

3
.left{ width:180px; float:left;}

.right{ width:200px; float:left;}

.middle{float:left; width: calc(100% - 380px);}

DEMO created by @Michael Nguyen

want to learn more than that use google

himanshu
  • 1,732
  • 1
  • 11
  • 12
1

I would use display: table-cell; to the center col and float property to left and right cols like this: http://jsfiddle.net/z692auyL/

.left { 
    background-color: #ddf; 
    float: left;
    width: 180px;
    height: 65px;
}
.center{ 
    background-color: green; 
    float: none;
    height: 65px;
    overflow: hidden;
    display: table-cell;
}
.right{ 
    background-color: cyan; 
    float: right;
    height: 65px;
    width:200px;
}
Giannis Grivas
  • 3,374
  • 1
  • 18
  • 38
1

I find that a CSS Table layout works well for this sort of thing. It benefits from excellent x-browser support and avoids the need to use (and subsequently clear) floats or having to find a polyfill for the poorly supported calc(). Furthermore, each column is automatically the same height.

A Simple 3 Column Layout with a Fluid Centre Column:

.main {display:table; width:100%;}
.left, .center, .right {display:table-cell;}
.left {width:180px; min-width:180px; background:red;}
.right {width:200px; min-width:200px; background:blue;}

Working demo at: http://jsfiddle.net/u64xc9x4/

N.B. The min-width is optional. Without it the 'cells' can be squished narrower if your page is smaller than the combined column width. This could be useful.

Moob
  • 14,420
  • 1
  • 34
  • 47