gauche div + droite div + centre div = 100% largeur. Comment réaliser?

Question

J'ai trois divs et un principal div:

<div id="container" style="width:100%;"> 
    <div id="left" style="width:201px; float:left;"> 
    .... 
    </div> 
    <div id="centre" style="float:left;"> 
    .... 
    </div> 
    <div id="right" style="width:135px; float:right;"> 
    .... 
    </div> 
</div> 

Comment il est possible de faire centre div largeur max, de sorte que containerDivWidth = leftDivWidth + rightDivwidth + centreDivWidth;

Answer 1

Je crois que ce que vous êtes e essayant de réaliser est la disposition «de Saint Graal».

Il y a une grande liste de l'article En plus de cette mise en page, vous devez vérifier:

http://www.alistapart.com/articles/holygrail

Answer 2

Vous ne pouvez pas mélanger la largeur relative et fixe qui est à mon avis une lacune en CSS.

Le mieux que vous pouvez faire est quelque chose comme:

<div id="container" style="width:100%;"> 
    <div id="left" style="width:20%; float:left;"> 
    .... 
    </div> 
    <div id="centre" style="width:65%; float:left;"> 
    ....  
    </div> 
    <div id="right" style="width:15%; float:right;"> 
    .... 
    </div> 
</div> 

Je serai très heureux si je me trompe.

Answer 3

Ce que j'ai déjà fait, est de définir centre pour avoir une marge gauche de 201px, et une marge droite de 135px. Réglez-le sur le positionnement relatif (au lieu de le faire flotter), puis il devrait remplir tout l'espace restant entre les colonnes gauche et droite. Je n'arrive pas à trouver un de mes anciens exemples de code, donc c'est le meilleur que je peux faire pour le moment. J'espère que cela aide!

Answer 4

avec un peu de javascript, son ajout parfait/ jquery d'abord pour sélecteurs & etc.

<script type="text/javascript" src="js/jquery.js"></script> 

et la partie javascript/

$(document).ready(function(){ 
    $('#centre').css("width",$(window).width()-336) 

    $(window).resize(function() { 
     $('#centre').css("width",$(window).width()-336) 
    }); 
}); 

Answer 5

Cela pourrait aider: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm alt text http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels-dimensions.gif

Answer 6

Cela permettra de vous avoir fixé des colonnes à droite et à gauche et une partie centrale souple:

CSS

<style type="text/css"> 
    #left { 
    float: left; 
    width: 201px; 
    border: 1px solid red; 
    } 

    #centre { 
    display: block; 
    overflow: auto; 
    border: 1px solid green; 
    } 

    #right { 
    float: right; 
    width: 135px; 
    border: 1px solid blue; 
    } 
</style> 

HTML

<div id="container" style="width:100%;"> 
    <div id="left">Left</div> 
    <div id="right">Right</div> 
    <div id="centre">Middle</div> 
</div>