HTML: taille div?

Question

J'ai 3 div s, tous contenus dans un parent Ils sont dans parent-div.
Voici mon HTML:

<div id="header"> 
    <div id="left"></div> 
    <div id="middle"></div> 
    <div id="right"></div> 
</div> 

Et mon CSS:

#left 
{ 
    float: left; 
    width: 334px; 
    background-image: ...; 
} 
#middle 
{ 
    float: left; 
    width: ???; 
    background-image: ...; 
} 
#right 
{ 
    float: left; 
    width: 280px; 
    background-image: ...; 
} 

Je veux que les #left et #right divs d'avoir des tailles statiques et milieux non-répétition. Toutefois, la div #middle doit être redimensionnée en fonction de la taille de la page. Comment puis-je écrire mon CSS de sorte que le div #middle change son avec dynamiquement, en dehors de la largeur des deux autres divs?

Answer 1

Je pense:

#left 
{ 
    float: left; 
    width: 334px; 
    background-image: ...; 
} 
#middle 
{ 
    margin-left: 334px; 
    margin-right: 280px; 
    background-image: ...; 
} 
#right 
{ 
    float: right; 
    width: 280px; 
    background-image: ...; 
} 

et alors vous aurez besoin de changer l'ordre des DIVs légèrement:

<div id="header"> 
    <div id="left"></div> 
    <div id="right"></div> 
    <div id="middle"></div> 
</div> 

Answer 2

quelque chose comme cela semble fonctionner

#left 
{ 
    position:absolute; 
    top:0; 
    left:0; 
    width: 334px; 
    border:solid 1px red; 
} 
#middle 
{ 
    position:absolute; 
    top:0; 
    left:339px; 
    right:285px; 
    border:solid 1px green; 
} 
#right 
{ 
    position:absolute; 
    top:0; 
    right:0; 
    width: 280px; 
    border:solid 1px blue; 
} 

aussi, si vous avez fait le div parent ont une position: relative; ces trois divs seraient positionnés absolument dans ce parent.

Answer 3

Mais le milieu devrait être redimensionné en raison de la taille de la fenêtre/de la page!

Malheureusement, il n'existe aucun moyen d'exprimer le calcul que vous souhaitez (width: 100%-614px) en CSS. Vous devez donc laisser la largeur par défaut à 'auto', ce qui signifie '100% moins les marges, les paddings et les bordures', puis utiliser les marges ou padding sur l'élément central de la même taille que les éléments gauche et droit. Mark B suggère une approche à l'aide de flotteurs; vous pouvez aussi le faire en positionnant le parent et en positionnant absolument les éléments fils gauche et droit, ce qui a l'avantage de ne pas nécessiter un réordonnancement des éléments.

Vous devrait être plus en mesure de position absolue l'élément central par ses propriétés left et right comme suggéré par John, mais cette technique « bord positionnement » ne fonctionne pas dans IE6, donc au lieu l'élément central a avoir des marges dans le même était comme l'exemple du flotteur.

Si vous essayez juste de mettre une image à la frontière à gauche et à droite de votre élément, vous pouvez le faire plus facilement en utilisant les images de fond imbriquées:

<div id="header"><div class="left"><div class="right"> 
    content... 
</div></div></div> 

<style type="text/css"> 
    #header { background: url(/img/header-background.gif); } 
    #header .left { background: url(/img/header-left.gif) top left repeat-y; } 
    #header .right { background: url(/img/header-right.gif) top right repeat-y; } 
    #header .right { padding: 0 280px 0 334px; } 
</style>