Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Duda con columnas CSS

Estas en el tema de Duda con columnas CSS en el foro de CSS en Foros del Web. Hola, buenas tardes, Tengo una duda con el acomodo de unas columnas, no sé si se pueda hacer, les explico: En la siguiente dirección http://serverbideas.com/jobs/ ...
  #1 (permalink)  
Antiguo 23/03/2015, 12:54
Avatar de Middrel  
Fecha de Ingreso: abril-2005
Mensajes: 835
Antigüedad: 19 años
Puntos: 27
Duda con columnas CSS

Hola, buenas tardes,

Tengo una duda con el acomodo de unas columnas, no sé si se pueda hacer, les explico:

En la siguiente dirección http://serverbideas.com/jobs/ tengo lo que será la estructura de un sitio en desarrollo, en el cuál tengo 3 divs dentro de otro div en la parte central:

Código HTML:
Ver original
  1. <div id="wrapper-middle">                    
  2.      <div class="wrapper-left"></div>
  3.      <div class="wrapper-middle"></div>            
  4.      <div class="wrapper-right"></div>            
  5. </div>

Sin embargo, cuando se redimensiona la pantalla, llega un punto en que estos 3 divs se empiezan a mandar hacia abajo (cosa que es correcta), sin embargo queda un espacio vacío a la derecha el cuál no me agrada como se ve.



Mi css para esos divs es el siguiente:

#wrapper-middle{
overflow:hidden;
margin:0 auto;
width:89%; }

.wrapper-left, .wrapper-middle, .wrapper-right{
background-color:#eaeaea;
float:left;
height:526px;
margin:15px;
min-width:350px; }

Mi pregunta es: Es posible que con los divs que van quedando, 1. se centren al div wrapper-middle o en su defecto, ocupen todo el espacio para que no quede ese hueco blanco? Es decir, ocupar el 100% del espacio del wrapper-middle siempre que sea necesario?

Espero haberme explicado.

Saludos a todos y buen inicio de semana!!
  #2 (permalink)  
Antiguo 23/03/2015, 14:02
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 7 meses
Puntos: 145
Respuesta: Duda con columnas CSS

Usa las media-queries cuando los contenedores se "desborden".
Entonces dales un 100% de ancho, así se van a ver una debajo de la otra.

Por ejemplo:

Código CSS:
Ver original
  1. @media only screen and (max-width : 930px) {
  2.  
  3. .wrapper-middle>div {
  4.     width:100%;
  5.     float:none;
  6. }
  7.  
  8. }

Estas media-queries son importantes para el diseño responsive
__________________
¿Te sirvió la respuesta? Deja un +1
  #3 (permalink)  
Antiguo 23/03/2015, 15:30
Avatar de Middrel  
Fecha de Ingreso: abril-2005
Mensajes: 835
Antigüedad: 19 años
Puntos: 27
Respuesta: Duda con columnas CSS

Ok, entendido.

Pensé que podría hacerlo sin usar, por el momento, las media querys, quería ver más que nada hasta donde podría trabajar sin utilizarlas.

Te agradezco por tu comentario NueveReinas ^^

Saludos!!
  #4 (permalink)  
Antiguo 23/03/2015, 16:13
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 7 meses
Puntos: 145
Respuesta: Duda con columnas CSS

Cita:
Iniciado por Middrel Ver Mensaje
Ok, entendido.

Pensé que podría hacerlo sin usar, por el momento, las media querys, quería ver más que nada hasta donde podría trabajar sin utilizarlas.

Te agradezco por tu comentario NueveReinas ^^

Saludos!!
No hay porque, para eso estamos

Si tu duda está solucionada, por favor, scroll hasta abajo y click en "Marcar como solucionado"
__________________
¿Te sirvió la respuesta? Deja un +1

Etiquetas: background, color, columnas, float, todo, width
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 06:41.