CODEWITHSUNDEEP
javascripthtmlcsswidth
Jeppe Strøm
Jeppe Strøm

Reputation: 543

100% width image

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.

Upvotes: 3

Views: 228

Answers (6)

sandeep
sandeep

Reputation: 92793

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/

Upvotes: 3

wintercounter
wintercounter

Reputation: 7488

You can use position: absolute to your corner divs to place on the left and right and the same background color to corner divs as page background has. Of course this only works when you use only colors for main background color.

If background color: #333

.paperBottomWrapper{
position: relative;
}

.paperBottom.left{
position: absolute;
left: 0;
top: 0;
background: #333 url(YOUR_IMAGE);
}

.paperBottom.right{
position: absolute;
right: 0;
top: 0;
background: #333 url(YOUR_IMAGE);
}

.paperBottom.middle{
width: 100%;
background: url(YOUR_IMAGE);
}

Upvotes: 0

xkeshav
xkeshav

Reputation: 54022

HTML

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

CSS

paperBottomWrapper { width:100%; }
.paperBottom { float:left; padding:1px }
.left { width :33%;background-color:red; }
.middle{ width :33%;background-color:green; }
.right { width :33%;background-color:blue; }

See DEMO

Upvotes: 0

Valli69
Valli69

Reputation: 9902

use attribute float:left in all 3 classes and specify the specific width for left and right div's, then specify the width of middle div by subtracting the sum of width of left and right divs. The sum of the width of 3 divs must be same as your wrapper widht

Upvotes: 0

Joseph
Joseph

Reputation: 119847

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

Upvotes: 1

bpeterson76
bpeterson76

Reputation: 12870

If you happen to be running jQuery UI and are just trying to round the bottom corners of a div, you could simply do it like this:

<div class="paperBottomWrapper ui-corner-bottom" style="width:100%"> 
  Stuff  
</div>

To get the background effect you're looking for with the jQuery method, just tile your background image in the paperBottomWrapper background. The rounded corners will adjust appropriately.

There are quite a few other ways you could approach this. For example, put the full background on the wrapper, then put the corner images into the two outer divs and float them appropriately.

Or, you could try the standard Sliding Door technique as described here

There are several other javascript rounded corner apps out there as well.

Upvotes: 0

Related Questions