contenido div fluido con barra lateral opcional

Question

Tengo una pregunta que no he encontrado abordados en los diferentes modelos de diseño CSS que he mirado, así que pensé que había puesto aquí.

Estoy trabajando en un sitio que utiliza un diseño de dos columnas de líquido básico / fijo. El contenido del sitio se encuentra en el div izquierda, y la barra lateral de la derecha. La barra lateral tiene una anchura fija de 200 píxeles o menos, y el contenido se expande para llenar la anchura restante de la matriz.

Esto es lo que el código es el siguiente:

<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>

Este es un enfoque bastante estándar y funciona bien para la mayor parte, pero el problema es que el diseño del sitio requiere que la barra lateral a aparecer sólo en ciertos casos. Todo el código HTML se genera a través de PHP, y el "get-content ()" función no se sabe si el "get-barra lateral ()" será llamada o no.

Cuando la barra lateral se llama, me gustaría que el contenido de ampliar a cabo para llenar el div padre, dejando suficiente espacio para la barra lateral. Si no hay una barra lateral, el contenido debe expandirse para llenar toda la anchura de la matriz.

¿Hay alguna manera de hacer esto con CSS - tal vez usando "auto" para los márgenes de contenido - sin depender de PHP / JavaScript

?

Answer 1

Es posible considerar hacerlo de esta manera:

<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>

Al hacerlo de esa manera, el menú se encuentra dentro de la div principal y no hay margen derecha, por lo que cuando el menú desaparece, el texto se expande para llenar el espacio.

La "altura: 100%;" asegura que los cuadros de menú y el contenido se extienden a la misma altura. También podría establecer esto a una cantidad de píxeles o em o un porcentaje inferior al 100 si se desea.

Answer 2

En lugar de flotar la barra lateral, intente lo siguiente:

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

Answer 3

¿Sería posible añadir una clase para el cuerpo usando PHP? Algo así como "uno-col" o "dos-col", dependiendo del contexto. A continuación, se puede dar el div contenido de un margen cuando hay una barra lateral, pero no cuando no lo hay.