Aller au contenu

Comment redonner toute la largeur au contenu quand une colonne disparaît ?


Sujets conseillés

Posté (modifié)

Hello,

Prenons la mise en page suivante sur 2 colonnes :

#content {
float: left;
width: 66%;
}
#sidebar {
margin-left: 70%;
background: #999;
}

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

<div id="sidebar">
..
</div>

Mon problème : quand ma colonne #sidebar est vide (ça arrive), je veux la faire disparaître. Or, j'arrive bien à faire disparaître le <div id="sidebar">...</div> du XHTML, mais comment faire pour que le contenu (#content) occupe alors toute la largeur de la page ?

Ma CSS n'est pas générée dynamiquement (contrairement à la colonne #sidebar), je ne peux donc pas changer la propriété "width" à la volée. Résultat : je me retrouve à faire des mises en page en tableau et c'est bien dommage... comment l'éviter ?

Je pourrais changer mon markup pour :

<div id="content">
..
<div id="sidebar">
..
</div>
</div>

et floater uniquement la sidebar, mais si le contenu est plus long qu'elle, elle ne descendra pas jusqu'en bas...

Modifié par vincedo
Posté

mettre la sidebar en float:right et la positionner avant le content qui devra avoir un width:auto

Ca devrait marcher

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...