Hola, tengo este css
Código:
body{
margin: 0 auto;
text-align: center;
background-color: #ececec;
}
#global{
margin:0 auto;
text-align:left;
background-color:#ffffff;
width:800px;
}
#esq_sup_izq {
background: url(../img/ic_esq_sup_izq.png) no-repeat;
height:24px;
}
#esq_sup_der {
background: url(../img/ic_esq_sup_der.png) right no-repeat;
height:24px
}
#lado_sup {
background: url(../img/ic_lado_sup.png) repeat-x;
height:24px;
}
#lado_izq {
background: url(../img/ic_lado_izq.png) repeat-y;
}
#lado_der {
background: url(../img/ic_lado_der.png) right repeat-y;
}
#esq_inf_izq {
background: url(../img/ic_esq_inf_izq.png) no-repeat;
height:24px;
}
#esq_inf_der {
background: url(../img/ic_esq_inf_der.png) right no-repeat;
height:24px;
}
#lado_inf {
background: url(../img/ic_lado_inf.png) repeat-x;
height:24px;
}
#page {
font-family:”Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0 auto;
text-align: center;
}
#le{
float:left; /*Esto es lo que me desajusta la web*/
}
y con el siguiente html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "..........w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="tpl/styles/ic_global.css" />
</head>
<body>
<div id="global">
<div id="lado_sup"> <div id="esq_sup_izq"><div id="esq_sup_der"></div></div></div>
<div id="lado_izq"><div id="lado_der">
<div id="page">
<div id="le">texto<br/>texto<br/>texto<br/>texto<br/>texto<br/></div>
</div>
</div></div>
<div id="lado_inf"><div id="esq_inf_izq"><div id="esq_inf_der"></div></div></div>
</div>
</body>
</html> El problema es que el texto que muestra la caja "le" se muestra por fuera del retangulo que he echo antes con los bordes. Ademas si miro en firefox con "Aardvark" me pode la caja "le" como si estuviera fuera de la caja "page".
Alguien se le ocurre algo???