7

I have 2 float:left div, the first is fixed and i want the second div stretch the remain space.

<div id="container">
 <div id="leftform"> </div>
 <div id="rightform"> </div>
</div>

Any idea? Thanks

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
ByulTaeng
  • 1,269
  • 1
  • 21
  • 40

2 Answers2

8

In CSS2:

#container {display:table; table-layout:fixed;}
#leftform, #rightform {display:table-cell;}
#leftform {width:100px;}

In world of IE hacks:

#container {padding-left:100px;}
#leftform {float:left; width:100px; margin-left:-100px;}
Kornel
  • 97,764
  • 37
  • 219
  • 309
  • The IE hacks version is the usual way of doing it on any browser. Using ‘table-cell’ directly inside ‘table’ with no ‘table-row’ is undefined even if the browser supported table display values. – bobince Apr 05 '09 at 15:21
  • 1
    @bobince: you are wrong. CSS requires automatic generation of missing anonymous table elements. It is specified and works reliably: http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes – Kornel Apr 05 '09 at 16:08
0

use a javascript function to make both equal in height. 

//fixing column height problem using Prototype
Event.observe(window,"load",function(){                         
    if(parseInt($('leftform').getStyle('height')) > parseInt($('rightform').getStyle('height')))
        $('rightform').setStyle({'height' : parseInt($('leftform').getStyle('height'))+'px'});
    else
        $('leftform').setStyle({'height' : parseInt($('rightform').getStyle('height'))+'px'});
});//observe

same problem here.

Community
  • 1
  • 1