100% width image

Question

I have a footer where I have a rounded-left-image, then the middle with repeat, and lastly the rounded-right-image.

How can I achieve perfect responsive scaling without overlapping? Something like: .paperBottom.middle {float:left; width: (100% -40px)} (40px being the width of the right-image)

Setup:

<div class="paperBottomWrapper"> 
   <div class="paperBottom left"> </div>
   <div class="paperBottom middle"> </div>
   <div class="paperBottom right"> </div>
</div>

The issue is, that the left and right have rounded graphics and it all have to come nicely together.

Answer 1

you Can use css display:table property for this:

.paperBottomWrapper{
 width:100%;
 display:table;
}
.paperBottom{
 display:table-cell;
}

Check this http://jsfiddle.net/A34pt/

OR

you can achieve this without display:table also.

Check this http://jsfiddle.net/A34pt/1/

Answer 2

here's a sample

<div class="paperBottomWrapper"> 
   <div class="paperBottom left"> </div>
   <div class="paperBottom right"> </div>
   <div class="paperBottom middle"> </div>
</div>​

/*the containing div*/
.paperBottomWrapper {
    overflow:hidden;
    zoom:1;        
}

/*putting height so we can see it in action*/
.paperBottomWrapper > * {
    height:50px;
}

/*middle repeating area*/
.middle{
    overflow:hidden;
    zoom:1;
    background:green;  
}

/*the edges*/
.left{
    float:left;
    background:red;  
    width:50px;    
}

.right{
    float:right;
    background:red;   
    width:50px;     
}