Tutorial :Stretch right float div width?



Question:

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


Solution:1

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;}  


Solution:2

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.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »