CODEWITHSUNDEEP
htmlresizewidth
user3137572
user3137572

Reputation: 41

Make div take up 100% of page unless another div is present

I'm trying to format a checkout page. The page shows an order summary on the left and recommended products on the right. When no recommended products are being used I'd like the order summary to stretch 100% of the page.

Currently the order summary is setup with a float:left; width:720px;. While the recommended products float:right;width:240;.

If I take the width out of the order summary or change it to 100% or auto it simply goes below the recommended products.

I tried attaching a photo that explains everything but I guess StackOverFlow restricts new users from posting photos.

Upvotes: 4

Views: 57

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

Actually this is all you need: DEMO

enter image description here

<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;
}

Upvotes: 1

Thomas Murphy
Thomas Murphy

Reputation: 1468

I believe this describe your situation. Try toggling back and forth with the button on the bottom:

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

The key here is setting the width dynamically from javascript based on whether the recommended products are show or hidden:

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

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

You haven't told us how recommended products is shown/hidden, but hopefully this helps.

Upvotes: 0

Related Questions