Make div take up 100% of the page if no other div is present

Question

I am trying to format a validation page. The page displays a summary of orders on the left and recommended products on the right. If no recommended products are used, I would like the order summary to stretch 100% of the page.

The order summary is currently being configured with float:left; width:720px;. Although recommended products float:right;width:240;.

If I take the width from the order summary or change it to 100% or automatically, it just goes below the recommended products.

I tried adding a photo that explains everything, but I believe StackOverFlow restricts new users from sending photos.

Answer 1

, : DEMO

<div class="summary">
  <div>Order summary...</div>
  <div>Products...</div>
</div>

.summary{
  display:table;
  width:100%;
}
.summary>div{
  display:table-cell;
}
.summary>div:first-child{
  background:gray;
}
.summary>div:nth-child(2){
  background:orange;
  width:240px;
}

Answer 2

, . :

http://jsfiddle.net/T2Quv/21/

javascript , :

$('.mrbutton').click(function(){
   $('.rec').toggle(); 

    if($('.rec').css('display') == 'none'){
    $('.checkout').css('width', '100%');  
    }else{
       $('.checkout').css('width', '69%');  
        };
 });

, /, , , .