mise en page centrée avec/sans sidebanner

Question

J'ai ce problème: je veux avoir une mise en page centrée avec ou sans sidebanner de droite (elle devrait flotter droit au contenu). donc mon css doit centrer le contenu + sidebanner IN CASE il y a une balise sidebanner ou juste le contenu (le contenu et sidebanner ont une largeur fixe) s'il n'y a pas de balise sidebanner - il y a quelques pages où il devrait y avoir le sidebanner n'est pas. css devrait bien formater les deux possibilités. il devrait donc comme ceci:

<div id="wrapper"><div id="content"></div><div id="sidebanner"></div></div> 

j'ai essayé quelques choses avec flotteurs et display: inline mais ça n'a pas vraiment :(

Answer 1

Essayez cette ...

#wrapper { 
    position:relative; 
    left:50%; 
    margin-left:-500px; 
    width:1000px; 
} 

.

marge gauche devrait être la moitié négative de la largeur

pour le sidebanner, quand il est là, vous pouvez ajouter une .wsidebanner de classe au bloc de contenu comme suit:

<div id="content" class="wsidebanner"></div> 

et le css serait:

#content { 
    background-color:#199; 
} 

.wsidebanner { 
    float:left; 
    width:800px; 
} 

#sidebanner { 
    background-color:#919; 
    float:right; 
    width:200px; 
} 

Answer 2

i utiliseraient suivant

#wrapper { 
    width:1000px; 
    margin:0 auto; //centering the wrapper 
    position:relative; //so we can position the ad absolutely 
} 
#sidebanner { 
    width:120px; 
    position:absolute; 
    top:0; 
    right:-120px; // same as width 
} 

Answer 3

Depuis la sélection parent d'un élément est impossible avec CSS, vous devrez ajouter une classe à l'emballage div lorsqu'il n'y a pas de barre latérale.

HTML

<div id="wrapper"> 
    <div id="sidebanner">...</div> 
    <div id="content">...</div> 
</div> 

<div id="wrapper" class="nosb"> 
    <div id="content">C</div> 
</div> 

CSS

#wrapper { 
    width: 400px; 
    margin: 0 auto; 
} 

#wrapper.nosb { 
    width: 300px; 
} 

#content + #sidebanner { 
    margin-right: 100px; 
} 

#sidebanner { 
    float: right; 
    width: 100px; 
} 

Voir fiddle.

Remarque: IE6 ne prend pas en charge le sélecteur de sibling adjacent.