espandir dos div

Ascariz · #1 (**permalink**) 13/10/2009, 09:45

hola a todos.

estoy intentado expandir dos div para que sean iguales pero solo consigo que se estire uno y que se iguales

como se puede hacer.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
#contenedor {
     overflow: hidden;
	 width:600px;
	 height:100%;
}
#columna1 {
     float:right;
	 width:250px;
	 height:100%;
	 border:red solid 1px;
    /* padding-bottom: 30px;
     margin-bottom: -10px;*/
}
#columna2 {
     
	 width:250px;
	 border:blue solid 1px;
	 height:100%;
    /* padding-bottom: 49px;
     margin-bottom: 50px;*/
}
</style>
</head>

<body>

<div id="contenedor">
<div id="columna1">trwe trwe e<br />
frfrfrfr<br />
frfrfr<br />
Frfrfr<br />
frfrfr<br />
frfr<br />
frfr</div>
<div id="columna2">gvsdg sdfg lrfr<br />
frfrfr<br />
frfrfrfrf<br />
rfrfrfr<br />
Frfrfr<br />
frfr</div>
</div>
</body>
</html>

loncho_rojas · #2 (**permalink**) 13/10/2009, 09:49

emm.. para que se expandan a donde? hacia abajo? pues tienes 2 opciones.. 1- ponerle un height distinto a 100%, por ejemplo.. 2-, que tu contenido lo calibres para que queden iguales.. si uno es mas largo, evidente que se verá de mayor tamaño..

Ascariz · #3 (**permalink**) 13/10/2009, 09:54

con el height:100% no estira la capa id="columna2"

cristian_cena · #4 (**permalink**) 13/10/2009, 11:30

Hola Ascariz:

Tu problema se resuelve con CSS y se lo conoce como "columnas equilibradas" o "columas de igual alto"

Chequea estos links:

http://www.araudi.net/ejemplos/colum...ilibradas.html

http://matthewjamestaylor.com/blog/e...r-css-no-hacks

Saludos!

kseso? · #5 (**permalink**) 13/10/2009, 12:22

O quizás esta otra composición:
www.css.devillasbuenas.es/2columnas.html

Ascariz · #6 (**permalink**) 14/10/2009, 01:22

muchas gracias a los dos

Ascariz · #7 (**permalink**) 14/10/2009, 02:48

los ejemplos que me habeis pasado no me van muy bien porque las dos capas tienen que tener un borde.

es para crear bloques de noticias del mismo tamaño y se crean dinamicamente.

kseso? · #8 (**permalink**) 14/10/2009, 05:32

Cita:

Iniciado por Ascariz

los ejemplos que me habeis pasado no me van muy bien porque las dos capas tienen que tener un borde.

Lógico, son estructuras, layouts, creados con un único propósito: hacer las "falsas columnas equilibradas en altura.
Ahora para que te "vayan del todo bien" a tus necesidades tendrás que adaptar cualquiera de esas composiciónes a tu particularidad.
En mi ejemplo, tendrás que trasladar la estructura:

Código html:

Ver original<div id="contenedor">
        <div id="izquierda">bla bla</div>
        <div id="centro">bla blabla blabla bla</div></div>

a tu caso particular, añadiendo aquellas propiedades y sus valores que necesites sin que el comportamiento de "falsas columnas" se vea alterado.

cristian_cena · #9 (**permalink**) 14/10/2009, 09:21

O creas una imagen que repites en x o y (background-repeat:) e incorporas el borde "simulado" en esa imagen o bien utilizas la propiedad "border" y se la aplicas a tus capas.

Saludos!

Mikmoro · #10 (**permalink**) 14/10/2009, 10:34

Tal y como dice mi firma, creo que deberás puntualizar todos los aspectos relevantes de tu diseño en tu consulta para que alguien pueda pretarte ayuda. Fíjate que el diseño que hay funciona, pero tu le quieres añadir bordes y no te marcha. E igual que eso, cada pequeña cosa que pongas o quites afectará a la solución, luego se necesita saber: ¿las columnas son de ancho fijo? ¿qué van a contener? ¿están juntas o separadas? ¿de qué colores son columnas y bordes?, y un largo etcétera de cuestiones importantes para la solución exacta.

Y por supuesto, una imagen del resultado ayuda lo suyo.