Problema con float:left

serxoker · #1 (**permalink**) 09/02/2009, 06:40

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???

serxoker · #2 (**permalink**) 09/02/2009, 07:04

Bueno pues encontre yo la solucion al final siempre me pasa lo mismo estoy horas sin encontrar la solucion, lo posteo y plaf encuentro la solucion.

Por si interesa con poner "display:inline;" en la caja "page" ya funciona todo perfectamente.