anchura columna

Nornor · #1 (**permalink**) 09/07/2007, 02:28

Buenos dias,
El problema que me ha surgido realizando un página es el siguiente.
Tengo dos colummnas de posición absoluta y con una imagen en background (de un ancho como el de la columna y un alto de 1px y repetida en y).
Al añadir a los div de esas columnas unos textos(<p>) de cierta longitud las columnas no guardan el ancho y la columna se alarga en IE y en MF se sale el texto de la columna.
Este es el código por si me podeis ayudar.

Código:

* { margin:0; padding:0; }
.limpia{
	clear: both;
}
body{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 0px;
	margin: 0px;
}
#container{
	width: 762px;
	background-image: url(../imagenes/header_background.jpg);
	height: 600px;
	border: 1px solid #007a63;
	background-repeat: repeat-x;
	margin: 0px auto;
	position: relative;
}
#izq{
	background-image: url(../imagenes/back_menu.jpg);
	background-repeat: repeat-y;
	width: 170px;
	border: 1px solid #007a63;
	position: absolute;
	top: 5px;
	left: 10px;
}
#menu{
}
#contenido{
	border: 1px solid #007a63;
	position: absolute;
	top: 25px;
	background-image: url(../imagenes/back_contenido.jpg);
	background-repeat: repeat-y;
	width: 565px;
	right: 5px;
	background-color: #FFFF00;
}
#interior_contenido{
	width: 565px;
}

Código:

<body>
<div id="container">
<div id="izq">
<div id="menu">
    <ul>
	   <li><a href="#">link 1</a></li>
	   <li><a href="#">link 1</a></li>
	   <li><a href="#">link 1</a></li>
	   <li><a href="#">link 1</a></li>
	   <li><a href="#">link 1</a></li>
	   <li><a href="#">link 1</a></li>
	   <li><a href="#">link 1</a></li>
	   <li><a href="#">link 1</a></li>
	 </ul>
	 </div>
</div>

<div id="contenido"><p>hdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjf</p>
<div id="interior_contenido"><p>jkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p></div>
</div>
</div>
</body>
</html>

Gracias por vuestra ayuda y un saludo

Nornor · #2 (**permalink**) 09/07/2007, 04:21

Bueno ya solucioné este problemilla. No se exactamente cómo, de tantas pruebas. Pero creo que funcionó al aplicar un overflow y luego quitarlo. ¡No lo entiendo!.
Pero he aqui que aparece otro problema. El contenedor no llega al final de la columna más larga. Este problema me surgió antes y lo solucione con un:
.limpia{ clear:both}
pero ahora eso no me funciona o lo aplico mal.
Si podeis ayudarme este es ell código:

Código:

.limpia{
	clear: both;
}
body{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 0px;
	margin: 0px;
}
#container{
	width: 762px;
	background-image: url(../imagenes/header_background.jpg);
	border: 1px solid #007a63;
	background-repeat: repeat-x;
	margin: 0px auto;
	position: relative;
	height: auto;
	}
#izq{
	background-image: url(../imagenes/back_menu.jpg);
	background-repeat: repeat-y;
	width: 170px;
	border: 1px solid #007a63;
	position: absolute;
	top: 5px;
	left: 10px;
}
#menu{
}
#contenido{
	border: 1px solid #007a63;
	position: absolute;
	top: 25px;
	background-image: url(../imagenes/back_contenido.jpg);
	background-repeat: repeat-y;
	width: 565px;
	right: 5px;
	background-color: #FFF;
}
#interior_contenido{
	width: 565px;
}