Comment faire en sorte qu'un div s'étende lorsqu'il est flottant ?

Question

J'essaie de créer une barre avec une largeur horizontale dynamique. Les fonds sont des pngs transparents afin qu'ils ne se chevauchent pas. J'en ai un pour le côté gauche, un pour répéter-x à travers la largeur dynamique du milieu et ensuite un autre bg pour la droite. Voici ce que j'ai pour l'instant...

.bar{
width: 100%;
overflow: hidden;
}

.left{
width: 50px;
height: 50px;
float: left;
}

.mid{
height: 50px;
float: left;
}

.right{
width: 50px;
height: 50px;
float: right;
}

<div class="bar">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
</div>

Le principal problème est donc d'étendre le .mid sur toute la largeur pour atteindre la droite, width : 100% ne fonctionne pas.

L'autre problème est de savoir ce que je peux faire si j'ai du contenu qui doit chevaucher les divs .left et .mid ? Créer une autre division et utiliser le z-index ?

Merci beaucoup !

Answer 1

Vous trouverez un bon article sur la façon de procéder sur le site A List Apart : A la recherche du Saint Graal . L'idée de base est que vous donnez .mid un rembourrage adapté .left y .right puis utiliser des astuces de positionnement comme les marges négatives pour déplacer .left y .right en place.