Question

I am experimenting with the float property of css.

I have tried to codes the match the height of two floating divs.

with reference to question

How might I force a floating DIV to match the height of another floating DIV?

Question on issue of border with floating div

Edited

I want the height and length of border to be adjusted according to largest height of div between the two divs

  <div style="background-color: yellow;">
    <div style="float: left;width: 65%; border-right:1px solid White;">
   column acolumn acolumn acolumn acolumn acolumn acolumn acolumn 
   acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn 
   acolumn   acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn 
    </div>
    <div style="float: right;width: 35%;border-right:1px solid White;">column b</div>
    <div style="clear: both;"></div>
   </div>

Please see the jsfiddle

The div with column b is not showing border of full length

In the below code I am unable to add border

  <div style="overflow: hidden;">
   <div style="background: blue;float: left;width: 65%;padding-bottom: 500px;
     margin-bottom: -500px;border:1px solid White;">column a<br />
     column acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn 
     acolumn  acolumn acolumn acolumn acolumn acolumn acolumn acolumn a
   </div>
   <div style="background: red;float: right;width: 35%;
  padding-bottom: 500px;margin-bottom: -500px;border:1px solid White;">column b
   </div>
</div>

Can anyone provide fix for the issues.

Answer 1

if I get it right you want to fill parents in height to do that you should specify height for parent div.

Round columns without width adjusted and border divs inserted
<div style="background-color: yellow; height: 500px;">
    <div style="float: left;width: 65%; height: 100%;">
        <div style="width: 100%; height: 100%;border: 1px solid red;">column acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn a</div></div>
  <div style="float: right;width: 35%; height: 100%;">
      <div style="width: 100%; height: 100%;border: 1px solid red;">column a</div></div>
  <div style="clear: both;"></div>
</div>
​

I hope this helps.