getting problem in layout

[mayanktalwar1988]

div.mainbox
{
position:fixed;
background-color:#ffffff;
border-style:solid;
border-width:1px;
width:60%;
left:20%;
top:20%;
}

div.one
{
background-color:#baecab;
width:75.4%;
float:left;
}
div.headingone

{

width:75.4%;
float:left;
background-color:bababa;

}

div.headingtwo
{



float:right;
background-color:#bababa;
widhth:24%;
}

div.second
{
background-color:#baecab;
position:relative;
float:right;
right:10%;

}






</style>





<div class="mainbox">
<div class="headingone"> <h1>category</h1></div>

<div class="headingtwo"><h1>total tutorials</h1></div>







<div class="one"><a href=#>hfhfvhfvhefvjefvh ghghgfhghnb hdf kdofh dhfi ioye y uidqwdwdy d iod ddfh f hfif hf f ffhfkhfio sf e sifhf wwifhufh gufg guff fufh </a></div>

<div class="second">mgkgtuuuunyu</div>




</div>


in the above code i have problem that the second column is not uniform with first column.means the second cloumn height is not following the first column height and therfore color in the second column is not fillin exactly the height it filled in first column...how to acheieve this..infact running this code you automatically understand whrere this table like div is not uniform..how to make the second column follow the height of first column so that background color in second column fill exactly the same height it filled in first column

[bluewalrus]

Not sure what you mean but maybe the headings not lining up?


.headingtwo {
background-color:#BABABA;
float:left;
width:24.6%;
}

[mayanktalwar1988]

i mean that second column background color doesnt extend to the same height as it coverd the first coloumn div..leave the heading..the one with green color