Html 使div占据页面的100%，除非存在另一个div

我正在尝试设置结账页面的格式。页面左侧显示订单摘要，右侧显示推荐产品。当没有推荐的产品被使用时，我希望订单摘要能够100%地扩展页面

当前，订单摘要设置为

float:left；宽度：720px。而推荐产品
float：对；宽度：240

如果我将宽度从订单摘要中去掉，或将其更改为100%或自动，则它只会低于推荐的产品

我试着附上一张解释一切的照片，但我想StackOverFlow限制了新用户发布照片。
我相信这可以描述你的情况。尝试使用底部的按钮来回切换：


这里的关键是根据推荐的产品是显示还是隐藏，从javascript动态设置宽度：

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

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

您还没有告诉我们推荐的产品是如何显示/隐藏的，但希望这会有所帮助。
实际上，这就是您所需要的：


如果你将链接添加到照片中，其他用户可以在其中编辑。你有权访问jQuery吗？这是对你正在处理的布局的准确描述吗？@user你方的评论将非常感谢。点击希望告诉他使用Javascript，但在依赖于实现的情况下，你的回答教会了我一些东西。很酷！
<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;
}