Question

I am experimenting with the float property of css.

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

The two codes

Method 1.

<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 a</div>
    <div style="background: red;float: right;width: 35%;
      padding-bottom: 500px;margin-bottom: -500px;border:1px solid White;">column b</div>
</div>

Method 2.

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

Both of the codes works but I want to create border across columns.I applied border property but it didn’t work.Is there a solution to above code to add border and be compatible with all browsers.

Edited Code

Method 3.

<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 Method 1 I am unable to apply border.
Can anyone provide fix for both the issues.

Answer 1

Yes, you can create another div inside your columnA and columnB, with width to 100% and borders.

If you add borders directly to your column div, 35% + 2px is more than 35%, so your total with will be larger than 100%.