procentowe szerokości DIV obserwowani przez stałej szerokości div

Question

Próbuję osiągnąć następujący układ z CSS i HTML:

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

Żeby było jasne, chcę div1, Div2, div3 zajmują jedną trzecią pozostała szerokość po dodaniu elementu div o wielkości 200 pikseli.

Co próbowałem:

1. Posiadanie Div1, Div2, div3, w div kontenera
2. Następnie pływających div4 w prawo i nadając jej szerokość 200px.

Próbowałem różnych innych rzeczy, bezskutecznie. Byłbym wdzięczny za każdą pomoc. Nie publikuję na SO często; przepraszam, jeśli łamiemy zasady etykiety.

Answer 1

Będziesz musiał zadzierać z poduszkami, aby naprawić resztę, ale poniżej jest działające skrzypce i kod. Przepraszam za złe konwencje nazewnictwa, ale powinieneś być w stanie zmienić to wszystko na potrzebne. Twoje zdrowie!

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

można użyć 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; 
} 

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

Answer 3

To może pomóc: 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");