Contenu du fluide div avec barre latérale en option

Question

J'ai une question que je n'ai pas trouvée dans les différents modèles de disposition CSS que j'ai consultés. J'ai donc pensé à la publier ici.

Je travaille sur un site qui utilise une disposition de base à deux colonnes fluide/fixe. Le contenu du site est dans la div gauche, et la barre latérale dans la droite. La barre latérale a une largeur fixe de 200 pixels environ, et le contenu se développe pour remplir la largeur restante du parent.

Voici ce que le code ressemble à:

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container --> 
    <div style="margin-right: 200px;">Content goes here.</div> 
    <div style="float: right; width: 200px;">Menus goes here.</div> 
    <div style="clear: both;"></div> <!-- float-clearer div --> 
</div> 

Cette approche est assez standard et fonctionne très bien pour la plupart, mais la question est que la conception du site nécessite la barre latérale apparaître que dans certains cas. Tout le HTML est généré par PHP, et la fonction "get-content()" ne sait pas si le "get-sidebar()" sera appelé ou non. Lorsque la barre latérale est appelée, je souhaite que le contenu se déplie pour remplir la div parente tout en laissant suffisamment de place pour la barre latérale. S'il n'y a pas de barre latérale, le contenu doit se développer pour remplir toute la largeur du parent.

Y at-il un moyen de le faire avec CSS - peut-être en utilisant "auto" pour les marges de contenu - sans compter sur PHP/JavaScript?

Answer 1

Vous pourriez envisager de le faire comme ceci:

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container --> 
    <div style="background-color:#CCC;height:100%;"> 
     <div style="background-color:#444;float: right; width: 200px;height:100%;">Menus goes here.</div> 
     Content goes here. 
    </div> 
    <div style="clear: both;"></div> <!-- float-clearer div --> 
</div> 

En le faisant de cette façon, le menu se trouve dans la principale div et il n'y a pas de marge droite, donc quand le menu disparaît, les agrandit texte pour remplir l'espace.

La "hauteur: 100%;" s'assure que les boîtes de menu et de contenu s'étendent à la même hauteur. Vous pouvez également définir un pixel ou un montant ou un pourcentage inférieur à 100 si vous le souhaitez.

Answer 2

au lieu de flotter la barre latérale, essayez ceci:

#sidebar { 
    display: inline-block; 
    display: -moz-inline-box; 
    -moz-box-orient: vertical; 
    vertical-align: top; 
    zoom: 1; 
    *display: inline; 
} 

Answer 3

Serait-il possible d'ajouter une classe au corps en utilisant PHP? Quelque chose comme "one-col" ou "two-col" selon le contexte. Ensuite, vous pouvez donner une marge au contenu div lorsqu'il y a une barre latérale, mais pas quand il n'y en a pas.