Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Layout de 2 columnas con css

Estas en el tema de Layout de 2 columnas con css en el foro de CSS en Foros del Web. Buenas , tengo un diseño a 2 columnas donde la parte de la derecha por el momento no la relleno así que estoy intentando hacer ...
  #1 (permalink)  
Antiguo 01/03/2014, 15:51
 
Fecha de Ingreso: enero-2004
Ubicación: here I Am
Mensajes: 434
Antigüedad: 15 años, 8 meses
Puntos: 1
Layout de 2 columnas con css

Buenas , tengo un diseño a 2 columnas donde la parte de la derecha por el momento no la relleno así que estoy intentando hacer con CSS que la parte de la derecha sea del mismo tamaño con el de la izquierda pero no hay forma...el código que tengo es

Código HTML:
<div id="wrapper">
        <div id="header">		 
	   HEADER ...
	 </div>


        <div id="content">		
	CONTENIDO IZQUIERDA
	</div>      
	
        <div id="leftcolumn">
        MENU DERECHA
        </div>
	
</div> 
Y los css que uso són

Código HTML:
#wrapper { 
margin: 0 auto;
width: 80%;
border:5px;
font-size: 13px;
}

#header {
 margin-top : 10px;
 width: 100%;
 float: left;
 height: 120px;
 background:#5f68ea;
 border-bottom:1px solid black;	
}


#content { 
 float: left;
 color: #333;
 background:white;
 width:84%; /* old 74% */
 min-height: 450px;
 display: inline;
 padding-left: 5px;
 padding-top: 5px;
 border-left: 1px solid #000000;
 border-right: 1px solid #000000;
}


#leftcolumn { 
 height:100%;
 width: 16%; 
 float: left;
border-left-style: groove;
border-left-width: 1px;
border-right-style: groove;
border-right-width: 2px;

}

Así es como se me ve





__________________
Nuevo foro sobr el mundo del motor - Renault foro
http://www.renaultforo.com
  #2 (permalink)  
Antiguo 01/03/2014, 15:54
Avatar de Heli0s  
Fecha de Ingreso: abril-2010
Mensajes: 789
Antigüedad: 9 años, 5 meses
Puntos: 40
Respuesta: Layout de 2 columnas con css

Sin especificar width:50% como esperas que cada div ocupe lo mismo?, estas especificando tu mismo el ancho de cada div.

Un saludo
  #3 (permalink)  
Antiguo 01/03/2014, 15:57
 
Fecha de Ingreso: enero-2004
Ubicación: here I Am
Mensajes: 434
Antigüedad: 15 años, 8 meses
Puntos: 1
Respuesta: Layout de 2 columnas con css

Cita:
Iniciado por Heli0s Ver Mensaje
Sin especificar width:50% como esperas que cada div ocupe lo mismo?, estas especificando tu mismo el ancho de cada div.

Un saludo

No entendí tu respuesta.
En el #content tengo un width de 84% y en el #leftcolumn tengo un left de 16% , pero yo hablo de altura no de anchura.

Gracias
__________________
Nuevo foro sobr el mundo del motor - Renault foro
http://www.renaultforo.com
  #4 (permalink)  
Antiguo 01/03/2014, 16:07
Avatar de Heli0s  
Fecha de Ingreso: abril-2010
Mensajes: 789
Antigüedad: 9 años, 5 meses
Puntos: 40
Respuesta: Layout de 2 columnas con css

Pensaba que te referias al ancho, en ese caso:
He probado tu código y me funciona bien, una única nota es:
Añade la propiedad box-sizing:border-box; en #content y #leftcolumn
Ya que el ancho en porcentajes suma 100%, si, pero despues añades borde y padding, lo que hace que se desborde, y tal vez sea eso lo que provoque que no tenga el alto correcto, ya que como te digo, he probado tu código, he añadido esas propiedades para que no se desborde, y el div de la derecha alcanza los 489px de altura.

Un saludo
  #5 (permalink)  
Antiguo 01/03/2014, 23:35
 
Fecha de Ingreso: enero-2004
Ubicación: here I Am
Mensajes: 434
Antigüedad: 15 años, 8 meses
Puntos: 1
Respuesta: Layout de 2 columnas con css

He hecho lo que me has dicho y no me funciona... te pongo un pantallazo para que lo veas. Otra vez gracias por la ayuda prestada !



Gracias
__________________
Nuevo foro sobr el mundo del motor - Renault foro
http://www.renaultforo.com

Última edición por radge; 02/03/2014 a las 01:27
  #6 (permalink)  
Antiguo 02/03/2014, 03:11
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 1 mes
Puntos: 2111
Respuesta: Layout de 2 columnas con css

¿Qué es lo que realmente quieres hacer? Porque tal vez la altura no importe, y sólo quieres que un color de fondo tenga la misma altura o algo así, porque para eso hay varios métodos.
  #7 (permalink)  
Antiguo 02/03/2014, 03:25
 
Fecha de Ingreso: enero-2004
Ubicación: here I Am
Mensajes: 434
Antigüedad: 15 años, 8 meses
Puntos: 1
Respuesta: Layout de 2 columnas con css

Lo que intento hacer es que el borde derecho de la capa de la derecha tenga el mismo tamaño que la capa del lado izquierdo

Es decir esto



Gracias !!!!
__________________
Nuevo foro sobr el mundo del motor - Renault foro
http://www.renaultforo.com
  #8 (permalink)  
Antiguo 02/03/2014, 05:14
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 1 mes
Puntos: 2111
Respuesta: Layout de 2 columnas con css

Pues ponlo dentro de un contenedor y te ahorras historias raras.

Código CSS:
Ver original
  1. #contenedor {
  2.   overflow: hidden; /* un clearfix */
  3.   border: 1px solid;
  4. }
  #9 (permalink)  
Antiguo 02/03/2014, 22:54
 
Fecha de Ingreso: enero-2004
Ubicación: here I Am
Mensajes: 434
Antigüedad: 15 años, 8 meses
Puntos: 1
Respuesta: Layout de 2 columnas con css

Cita:
Iniciado por pzin Ver Mensaje
Pues ponlo dentro de un contenedor y te ahorras historias raras.

Código CSS:
Ver original
  1. #contenedor {
  2.   overflow: hidden; /* un clearfix */
  3.   border: 1px solid;
  4. }

Ahora si...era eso muchas gracias !!!
__________________
Nuevo foro sobr el mundo del motor - Renault foro
http://www.renaultforo.com

Etiquetas: background, color, columnas, contenido, layout, tamañ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 09:25.