11

I'm looking for a way for CSS(3) to be able auto adjust the width of a center container div between a float:left div and float:right div.

The center div also needs the ability to have a min-width set, similar to google+ -> home where the center content is auto fitted between the left navigation buttons and the right chat pane. Then when the screen width shrinks past a certain point (detected with javascript) the chat pane minimizes to save space.

Here is an active mock-up to make work: http://jsfiddle.net/9vrby/

Also, here is the css code I'm using now:

#left{ float:left; width:200px; height:400px; border:1px solid #000; }

#center{ float:left; width:auto; height:400px; border:1px solid red; }

#right{ float:right; width:100px; height:400px; border:1px solid blue; }

Please let me know if you need more information, and thanks in advance for the help.

sadmicrowave
  • 39,964
  • 34
  • 108
  • 180
  • Well, I came up with a pretty bad jquery version. http://jsfiddle.net/9vrby/3/ it kind of sucks ( it isn't fluid) and so on. but maybe someone can build from it. – Alfred Larsson Jun 01 '12 at 23:36

2 Answers2

22

On #center, drop float: left and add overflow: hidden. Also, #center needs to be moved to last in the HTML.

http://jsfiddle.net/thirtydot/9vrby/14/

This works in all modern browsers and even IE7.

Stephane Mathis
  • 6,542
  • 6
  • 43
  • 69
thirtydot
  • 224,678
  • 48
  • 389
  • 349
4

One trick is not to use floats but display:table-cell.

http://jsfiddle.net/9vrby/8/

HTML:

<div id='left'></div>
<div id='center'></div>
<div id='right'></div>

CSS:

#left{ display:table-cell; min-width:200px; height:400px; border:1px solid #000; }
#center{ display:table-cell; min-width:200px; width:100%; height:400px; border:1px solid red; }
#right{ display:table-cell; min-width:100px; height:400px; border:1px solid blue; }

Beware though, this method doesn't work in IE7 (and below, but who still supports that crap right?). But perhaps you can take a look at CSS3Pie which enables you to use CSS(3) for browsers that officially don't support it, like IE7. So perhaps display:table-cell will work aswell.

mwfearnley
  • 3,303
  • 2
  • 34
  • 35
w00
  • 26,172
  • 30
  • 101
  • 147
  • CSS3 PIE won't help with `display: table` in IE7. There is a JavaScript fix though: http://tanalin.com/en/projects/display-table-htc/ – thirtydot Jun 02 '12 at 00:03