Foros del Web » Creando para Internet » CSS »

Columna - linea vertica - Columna

Estas en el tema de Columna - linea vertica - Columna en el foro de CSS en Foros del Web. 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 - ...
  #1 (permalink)  
Antiguo 23/06/2011, 18:37
Avatar de 0kool  
Fecha de Ingreso: julio-2006
Ubicación: En el país de la libertad
Mensajes: 28
Antigüedad: 10 años, 10 meses
Puntos: 0
Columna - linea vertica - Columna

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> 
  #2 (permalink)  
Antiguo 23/06/2011, 22:15
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 9 meses
Puntos: 64
Respuesta: Columna - linea vertica - Columna

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%;
}
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 23/06/2011, 22:20
 
Fecha de Ingreso: junio-2011
Ubicación: Rosario
Mensajes: 1
Antigüedad: 5 años, 11 meses
Puntos: 0
Respuesta: Columna - linea vertica - Columna

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.
  #4 (permalink)  
Antiguo 24/06/2011, 05:46
Avatar de 0kool  
Fecha de Ingreso: julio-2006
Ubicación: En el país de la libertad
Mensajes: 28
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Columna - linea vertica - Columna

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?
  #5 (permalink)  
Antiguo 24/06/2011, 11:09
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 9 meses
Puntos: 64
Respuesta: Columna - linea vertica - Columna

limpia el cache por las dudas
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #6 (permalink)  
Antiguo 24/06/2011, 12:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 11 meses
Puntos: 538
Respuesta: Columna - linea vertica - Columna

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

Etiquetas: columna, linea
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 07:16.