Foros del Web » Creando para Internet » CSS »

Controlar anchos en diseños variables de 2 a 3 columnas

Estas en el tema de Controlar anchos en diseños variables de 2 a 3 columnas en el foro de CSS en Foros del Web. Hola, quisiera saber si hay alguna forma usando únicamente CSS para controlar lo siguiente: En una web de páginas PHP, hay opciones de menu que ...
  #1 (permalink)  
Antiguo 10/02/2010, 18:09
 
Fecha de Ingreso: mayo-2003
Mensajes: 527
Antigüedad: 14 años, 6 meses
Puntos: 3
Controlar anchos en diseños variables de 2 a 3 columnas

Hola, quisiera saber si hay alguna forma usando únicamente CSS para controlar lo siguiente:

En una web de páginas PHP, hay opciones de menu que muestran un diseño de tres columnas, anchos:(left:25%, main:50%, right:25%), y otras que muestran solo las dos primeras (left:25%, main:75%).

Como asignando simplemente con los primeros porcentajes, el diseño a dos columnas quedaría comprimido con el espacio sobrante de la columna derecha vacío, pensé en esta otra posible solución, que no me da resultado:

Código HTML:
#left {
     float:left;
     width:25%;
}

#main {
     float:left;
     min-width:50%;
     max-width:75%;
}

#right {
     float:left;
     width:25%;
}
Como digo no me da resultado. Lo único que se me ocurre es mediante PHP, asignar al contenedor de las columnas bien id="dos-col", o bien id="tres-col" dependiendo de la opción elegida y el diseño que le corresponde, y hacer en CSS:

Código HTML:
#dos-col #main {
     float:left;
     width:75%;
}

#tres-col #main {
     float:left;
     width:75%;
}
aparte de los estilos para #left y #right que no variarían.

Alguien sabe de una opción mejor? A ser posible sin que haga falta programación, solo CSS, y si no, cualquier otra opción más idónea que la que he puesto.
  #2 (permalink)  
Antiguo 10/02/2010, 19:37
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Controlar anchos en diseños variables de 2 a 3 columnas

Si quieres que sean fijos..

Cita:
#left {
float:left;
width:200px;
}

#main {
float:left;
min-width:50%;
max-width:520px;
}

#right {
float:left;
width:200px;
}
para que sea centrado coloca otra div que se llame "contenedor" y haz lo siguiente con el CSS:

Cita:
#contenedor {
width:920px;
margin: 0 auto;
}
todas las otras divs debén estar adentro de la div "contenedor"

el ancho de las 3 columnas sumalas, y si es mayor a el del contenedor sube el del contenedor para no tener problemas.


saludos

Etiquetas: columnas, controlar, variables, diseño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:49.