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