Problema maquetacion (Divs desiguales)

[demono]

Hola a todos! Intente buscar algun problema similar pero por alguan u otra razon eran diferentes al mio!


Antes que nada, el codigo que estoy usando es el siguiente:

Código HTML:

<div id="main">
	<div id="contenedor_menu">
	  ASD
	</div>

	<div id="contenedor_contenido">
	  ASD
	</div>
</div> 

Y la hoja de estilo CSS la siguiente:

Código:

#main
{
font-family: "Arial", Verdana, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #676767;
width: 948px;
background-color: #FFFFFF;
display: table;
}

#contenedor_menu
{
background-color:#F6F6F6;
width: 21%;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #CCCCCC;
float:left;
padding: 5px;
height: 100%;
}


#contenedor_contenido
{

float:left;
background-color: #FFFFFF;
padding: 5px;
width: 76%;
height: 100%;
}

El tema viene porque el Div de contenido obviamente tiende a ser mas largo que el del menú, entonces, el DIV de menu queda mas "corto", tendria que seguir hasta el final del div contenedor "Main"

Probe dandole 100% de Height al Main y no funcono, alguna idea?

[DragonX]

acá te dejo la solución a tu problema de columnas, gracias MIK!

[matiascano]

otra solucion posible es crear una capa contenedora de ambas (siempre y cuando no trabajes con % y si con unidades) con overflow:auto; y crear un fondo del ancho de la capa que sea de 1px de alto y hacer ahí la separación de fondos con un repeat-y

un saludo