fill remaining space with div width

[Russia]

hey guys thanks for the upcoming support how do I set the blue to fill up the remaining width of the while maininfo div? I tried setting the width:auto
 

<div class="maininfo">

    <div class="large">2</div>

    <div class="smallblock">

        <div class="smalltop">3</div>

        <div class="small">4</div>

    </div>

    <div class="smallblock">

        <div class="smalltop">5</div>

        <div class="small">6</div>

    </div>

</div>

.maininfo {



    width: 600px;



}



.large {

    float: left;

    height: 95px;

    background-color: blue;

    width:auto;

}





.smallblock {

    float: right;

    height: 90px;

    margin: 0 0 0 5px;

    width: 20%;

}



.small {

background-color: red;

height: 50%;

width: 100%;

}

.smalltop {

background-color: red;

height: 50%;

width: 100%;

    margin-bottom:5px;

}

Edit fiddle - JSFiddle

 

[Frank_b]

The small blocks take 20% plus 5px spacing each. So the remaining width will be: 60% - 10px. You can use the css3 calc function:

.large {
    float: left;
    height: 95px;
    background-color: blue;
    width:calc(60% - 10px);
}