[SOLUCIONADO] Layout de 2 columnas con css

[radge]

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

[Heli0s]

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

Un saludo

[radge]

Iniciado por Heli0s

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

[Heli0s]

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

[radge]

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

[pzin]

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

[radge]

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

[pzin]

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

Código CSS:

#contenedor {
  overflow: hidden; /* un clearfix */
  border: 1px solid;
}
 

[radge]

Iniciado por pzin

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

Código CSS:

#contenedor {
  overflow: hidden; /* un clearfix */
  border: 1px solid;
}
 

Ahora si...era eso muchas gracias !!!