div Percentuale larghezza seguiti da larghezza fissa div

Question

io sto cercando di realizzare il seguente schema con CSS e HTML:

_____________________________________________________________________________ 
| div1 33%   | div2 33%   | div3 33%   | div4 200px | 
————————————————————————————————————————————————————————————————————————————— 

Per essere chiari, io voglio div1, div2, div3 di occupare un terzo del restante larghezza dopo l'aggiunta del div 200px.

Quello che ho cercato:

1. Avere div1, div2, div3, in un contenitore div
2. Poi galleggiante DIV4 a destra e dandogli una larghezza di 200px.

Ho provato varie altre cose, inutilmente. Gradirei qualsiasi aiuto con questo. Non pubblico spesso su SO; per favore perdonami se sto infrangendo le regole dell'etichetta.

Answer 1

Dovrai pasticciare con i paddings per sistemare il resto, ma di seguito c'è un violino funzionante e il codice. Ci scusiamo per le scadenti convenzioni sui nomi, ma dovresti essere in grado di cambiare tutto ciò in base alle tue esigenze. Saluti!

http://jsfiddle.net/8HgHt/

HTML:

<div class="whole_container"> 

    <div class="third_holder"> 
     <div class="third"> 
     </div> 
     <div class="third"> 
     </div> 
     <div class="third"> 
     </div> 
    </div> 

    <div class="absolute_div">  
    </div> 
</div> 

CSS:

.third { 
    padding: 0; 
    background-color: gray; 
    height: 100px; 
    float: left; 
    display: table-cell; 
    width: 33%; 
} 

.third:hover { 
    background-color: red; 
} 

.third_holder { 
    float: left; 
    width: 100%; 
    display: table-cell; 
} 

.absolute_div { 
    width: 200px; 
    display: table-cell; 
    background-color: silver; 
} 

.whole_container { 
    width: 100%; 
    display: table;  
} 

Answer 2

si potrebbe usare calc

Jsfiddle Demo

CSS

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; /* accounting for borders */ 
} 

.wrapper { 
    width:80%; /* or any width */ 
    margin:10px auto; /* for visualisation purposes only */ 
    overflow:hidden; /* float containment */ 
} 

.wrapper div { 
    float:left; 
    height:100px; 
} 

.fixed { 
    width:200px; 
    background: lightblue; 
} 

.percent { 
    width:calc((100% - 200px)/3); /* the magic bit */ 
    background: lightgreen; 
    border:1px solid grey; 
} 

supporto IE9 & up - http://caniuse.com/calc

Answer 3

Questo può aiutare: http://jsfiddle.net/GUcCa/1/

html

<div class="border block" id="fixd"> 
    div4 
</div> 
<div class="border2 block" id="floating"> 
<div class="border block"> 
    div1 
</div> 
<div class="border block"> 
    div2 
</div> 
<div class="border block"> 
    div3 
</div> 
</div> 

css

.border{ 
    border-style: dotted; 
    border-width: 1px; 
} 
.border2{ 
    border-style: solid; 
    border-width: 1px; 
} 
.block{ 
    display: inline-block; 
    width:33%; 
} 
#fixd{ 
    width:200px; 
    float:right; 
} 
#floating{ 
    width:100%; 
} 

jQuery

var fxdWidth = parseInt($('#fixd').css("width").replace("px",'')); 
var totalWidth = parseInt($('#fixd').parent().css("width").replace("px",'')); 
$('#floating').css("width",totalWidth-fxdWidth+ "px");