Geek asks and answers

100% image width

I have a footer where I have a rounded left image, then a middle with repetition and finally a rounded right image.

How can I achieve perfect flexible scaling without overlapping? Something like: .paperBottom.middle {float:left; width: (100% -40px)}(40px is 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 problem is that the left and right have rounded graphics, and they should all blend in well.

+3
source share
6 answers

You can use the css property display:tableto do this:

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

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

OR

you can achieve this without display:table.

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

+3
source 

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

jQuery UI div, :

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

, jQuery, PaperBottomWrapper. .

, . , , div .

,

javascript.

0

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

0
source

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

Cm. DEMO

0
source

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

If the 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);
}
0
source

More articles:


All Articles