Columna - linea vertica - Columna

[0kool]

Hola, me estoy descocando tratando de hacer lo que dice el título. Tengo un div "noticias" dentro del cual hay tres divs:

- cuadro-noticias1
- linea-vertical2
- cuadro-noticias2

Se supone que dentro de "noticias" los otros div queden como tres columnas.
lo que quiero hacer es que el div padre "noticias" se estire cuando se cargue el contenido en los divs hijos "cuador-noticias1 y 2" y arrastre a su alto dinámico a la linea que los separa, dandole el mismo alto.

Hasta ahora logre todo, menos que la línea copie la altura del div "noticias".

En el css:

Código HTML:

#noticias{
position:relative;
overflow: hidden;
text-align:center;
background-color:#fffff1;
margin:0 auto 0 auto;
width:935px;
padding-bottom:40px;
}
#noticias #cuadro-noticias1{
float:left;
background-color:#cccccc;
width:410px;
height:inherit;
margin-left:40px;
}
#noticias #linea-vertical2{
float:left;
height: 100%;
background-color:#FF0000;
width:2px;
margin-left:17px;
margin-right:17px;
margin-top:30px;

}
#noticias #cuadro-noticias2{
float:left;
background-color:#cccccc;
width:410px;
height:inherit;
}

<

y en el html:

Código HTML:

<div id="noticias">
<div id="cuadro-noticias1"></div>
<div id="linea-vertical2"></div>
<div id="cuadro-noticias2"></div>
</div> 

[GAST0N]

Mira aca modifique el css que hiciste.. creo q es el resultado q buscas... luego comparalos con el tuyo para saber las diferencias

Código:

#noticias{
position:relative;
overflow: hidden;
text-align:center;
background-color:green;
margin:0 auto 0 auto;
width:935px;
padding-bottom:40px;
}
#noticias #cuadro-noticias1{
float:left;
background-color:#cccccc;
width:410px;
height:100%;
margin-left:40px;
}
#noticias #linea-vertical2{
float:left;
height: 100%;
background-color:#FF0000;
width:2px;
margin-left:17px;
margin-right:17px;
margin-top:30px;

}
#noticias #cuadro-noticias2{
float:left;
background-color:#cccccc;
width:410px;
height:100%;
}

[kingsize]

borra el div "lineavertical" y al div "noticias" le pones una imagen de fondo centrada de 1px x 1px y repetida en el eje Y. La imagen se repetirá hacia abajo hasta que termine el div formando una linea de separación. Algo así:

Código HTML:

#noticias {
background: url("/ruta/hacia/la/imagen1x1.jpg") repeat-y center top;
}

y Acordate de limpar el "float" al final.

[0kool]

Gastón, gracias por contestar te comento que reemplacé mi código css por el tuyo y sigue igual que antes, ya había intentado en cambiar el height a 100% pero no funcionó

Kingsize, gracias por contestar también! tu solución parece bastante simple, lo cual es muy bueno, pero que pasaría si fuesen 3 columnas o más en lugar de 2 y llevara 3 líneas de separador esto lo pregunto pensando en otra parte de la web que estoy haciendo. Como sería eso de "limpiar los float" ¿clear:both quizás?

[GAST0N]

limpia el cache por las dudas

[kseso?]

¿No es una estructura de falsas columnas css/columnas equilibradas css/faux columns css ?