Split largeur disponible entre les deux divs

Faire usage de overflow:hidden (ou overflow:auto - tant que le dépassement n'est pas visible [par défaut]) pour déclencher block formatting contexts pour remplir largeur restante

(J'ai supposé fixe la largeur de 100px pour div1 et div4)

VIOLON

Balisage

<div class="div1">DIV 1</div>
<div class="container">
    <div class="div2">DIV 2</div>
    <div class="div3">DIV 3</div>
</div>
<div class="div4">DIV 4</div>

CSS

html,body,div
{
    height: 100%;
}
.div1 {
    float:left;
    width: 100px;
    background: aqua;
}
.container
{
   overflow: hidden;
   padding-right: 100px;
   box-sizing: border-box;
    background: green;
}
.div2 {
    background:yellow;
    float:left;
}
.div3 {
    background:brown;
    overflow: hidden;
}
.div4 {
    position: absolute;
    right:0;
    top:0;
    background:pink;
    width: 100px; 
}

OriginalL'auteur Danield

Voici une solution à l'aide de display:table sans l'aide de la table,tr,td, etc:
(VIOLON)

HTML

<div id="foo">
    <div id="left"></div>
    <div id="center1">asdfasdfasdf</div>
    <div id="center2"> asdfasdlfkjasl;dkfjalsdjkf</div>
    <div id="right"></div>
</div>

CSS

div {
    border: solid 1px black ;
    height: 20px;
}

#foo {
    border: none; 
    display: table; 
    width: 100%;
}

#left, #right {width: 100px;}

#foo > div {
    display: table-cell;
}

OriginalL'auteur fred02138

Le calc ( http://caniuse.com/#search=calc ):

#foo {
    position: relative;
    background-color: #ccc;
}

#foo:after {
    content: "";
    clear: both;
}

#foo > div {
    width: calc(50% - 100px);
    height: 100px;
    float: left;
}

#foo > div:nth-child(1) {
    width: 100px;
    background-color: #f00;
}

#foo > div:nth-child(2) {
    background-color: #0f0;
}

#foo > div:nth-child(3) {
    background-color: #00f;
}

#foo > div:nth-child(4) {
    width: 100px;
    background-color: #000;
}

http://jsfiddle.net/coma/YPWcW/

Le rembourrage/position:

#foo {
    padding: 0 100px;
    position: relative;
    background-color: #ccc;
}

#foo:after {
    content: "";
    clear: both;
}

#foo > div {
    width: 50%;
    height: 100px;
    float: left;
}

#foo > div:nth-child(1) {
    width: 100px;
    background-color: #f00;
    float: none;
    position: absolute;
    top: 0;
    left: 0;
}

#foo > div:nth-child(2) {
    background-color: #0f0;
}

#foo > div:nth-child(3) {
    background-color: #00f;
}

#foo > div:nth-child(4) {
    width: 100px;
    background-color: #000;
    float: none;
    position: absolute;
    top: 0;
    right: 0;
}

http://jsfiddle.net/coma/qqR4Z/

Vous pouvez utiliser min-largeur:

http://jsfiddle.net/coma/38KQt/2/

OriginalL'auteur coma

Ma solution emprunte à d'autres qui ont été déjà posté, mais en testant, j'ai trouvé que le contenu dans les deux divs foiré avec la distribution de la largeur... leur permettrait de conserver la même largeur, aussi longtemps qu'ils avaient exactement le même contenu, mais serait inégalement large dès que l'on a obtenu plus de contenu.

Donc, dans ma solution, j'ai utilisé jQuery pour distribuer le reste de la largeur pour les deux centrales de la vrd, faire leur largeur, même au-delà des différences sur leur contenu.

Bonus #1: jQuery n'a pas besoin de connaître la largeur de la gauche et la droite divs explicitement, comme il récupère quelle que soit la largeur a été défini par CSS.

Bonus #2: Facilement spécifier combien de centre de divs sont là et de partager le restant de la largeur de façon égale entre tous. Il suffit de changer le numéro de la largeur restante est divisé par.

Voici un violon. Ci-dessous est la solution telle que publiée dans le violon, simplifié. Le violon montre de, plus en détail, les failles d'autres solutions lorsque le contenu est livré à la centrale divs.

<style>
div { margin: 5px; padding: 5px; } 
.js-container { border: 1px solid red; display: table; }
.with-width { width: 80%; }
.js-child { border: 1px solid gray; display: table-cell; }
.left,
.right { width: 100px; }
</style>
<h3>Using javascript to dynamically distribute the remaining width</h3>
<div class="js-container with-width">
<div class="js-child left">left</div>
<div class="js-child center">center</div>
<div class="js-child center">center</div>
<div class="js-child right">right</div>
</div>
<div class="js-container with-width">
<div class="js-child left">left</div>
<div class="js-child center">center left <em>doesn't get wider</em> because of extra content</div>
<div class="js-child center">center right</div>
<div class="js-child right">right</div>
</div>
<script>
$(document).ready(function() {
function containerWidth() {
var w = parseInt($('.js-container').outerWidth(), 10);
return w;
}
//console.log('containerWidth: ' + containerWidth());
function outerChildrenWidth() {
var wl = parseInt($('.js-container').find('.left').outerWidth(), 10);
var wr = parseInt($('.js-container').find('.right').outerWidth(), 10);
return wl + wr; //bonus #1
}
//console.log('outerChildrenWidth: ' + outerChildrenWidth());
function centerChildWidth() {
var w = (containerWidth() - outerChildrenWidth()) / 2; //bonus #2
return w;
}
//console.log('centerChildWidth: ' + centerChildWidth());
function setCenterChildWidth() {
$('.js-container').find('.center').css('width', centerChildWidth() + 'px');
}
setCenterChildWidth();
});
</script>

Noter que le js-préfixe sur certaines classes est là parce que je l'ai utilisé pour séparer le javascript influence de balisage de la "normale". J'ai aussi gardé les journaux de la console dans le cas où vous souhaitez déboguer.

OriginalL'auteur Wallace Sidhrée