height: auto; no hace auto

Citar

Escrito el 16 Jun 2006 07:14 pm

Holas maestros de CLAB, ultimamente he estado con CSS y XHTML, todo bien con los tutorials que hay aqui, pero haciendo una pagina en la que hay divs anidados, el div principal que contiene otros no permite hacer auto en su height, ya lo prové en css vista y solo funciona con IE :crap:

he estado buscando usar solo codigo simple y estandar pero :cry:

.

Quisiera saber si le pueden dar una ojeada a este codigo:

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=utf-8" />
   <title><?php echo TITLE ?></title>
   <link rel="stylesheet" type="text/css" href="css/all.css">
</head>

<body>
<div id="barra">barrita en vez de imagen grande</div>
<div id="container">
   <div id="left">
      <div id="tabs">Pestañas</div>
      <div id="grid">grid y contenidos</div>
   </div>
   <div id="right">hacia la derecha</div>
</div>
<div id="footer"></div>
</body>
</html>

y esta es la de la css:

Código :

body {
   background: #f9fcfe;
   color: #000;
   margin: 0;
   padding: 0;
}

body, td, form, p {
   font-family: "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
   font-size: 12px;
}

#barra {
   background-image: url(../img/global/bg-barra.gif);
   height: 20px;
   padding: 4px 0 5px 10px;
   color: #FFFFFF;
   text-align: left;
}

#container {
   background-color: #FFFFFF;
   border: 1px solid #ccc;
   margin: 15px auto;
   width: 980px;
   height: auto;
}

#left {
   width:650px;
   height:auto;
   background-color:#EFEFEF;
   border:0px solid #000;
   margin:0;
   padding:3px;
   float:left;
}

#right {
   width:314px;
   height:auto;
   background-color:#EF9A00;
   border:0px solid #000000;
   margin:0;
   padding:5px;
   float:right;      
}

#tabs {
}

#grid {
}

#publicLeft {
}

#publicRigth {
}

Al hacer esto la capa #container no hace auto en si heigh, vi que el problema comienza cuando le pongo: float:left a las demas capas internas.

Agradecería cualquier consejo o crítica que llueva, un saludo y gracias de antemano

Por phpleo

130 de clabLevel

1 tutorial

Envíale un mensaje privado Web

Lima, Perú

Citar

Escrito el 17 Jun 2006 07:40 am

para eso hay un truco muy simple, crea una nueva clase llamada clearing, o como quieras y la situas detrás de la div que está entre container y la que de problemas.
Ejemplo:

Código :

   .clearing{
      clear:both;
   }

Código :

   {...}
   
   </div>
   <div id="right">hacia la derecha</div>
   <div id="clearing"></div>
</div>//Fin de la div Container
<div id="footer"></div>

   {...}

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 17 Jun 2006 01:39 pm

De hecho es un problema muy clásico, el height no tiene auto en realidad, por lo que la "interpretación" de IE del asunto es erronea

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Bastard Operators From Hell

Envíale un mensaje privado

Webdesigner & Developer, en mis ratos libres bebo café por litros.

Citar

Escrito el 17 Jun 2006 05:37 pm

Muchas gracias ambos, me ha servido de mucho la respuesta Johnny, Sr. Aoyama en IE esto si me funcionaba por lo que me daba mas colera

y mas aun viendo aqui http://www.w3schools.com/css/css_dimension.asp que si estab soportado.

Gracias nuevamente a ambos

.

Por phpleo

130 de clabLevel

1 tutorial

Envíale un mensaje privado Web

Lima, Perú

Citar

Escrito el 02 Jun 2008 03:43 pm

buenas, se que hace tiempo que se solucionó el proeblema, pero a mi no me va en IE.
En FF y en O sí pero no en IE. Me podría decir alguien porque?

Por JackSpy

3 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Sevilla

Citar

Escrito el 02 Jun 2008 06:44 pm

Solo como comentario por si acaso no lo habían visto y alguien nuevo como yo no lo notó al inicio el clearing se definio con un "." y no un "#"

Código :

  .clearing{
      clear:both;
   }

y en el código html de ejemplo se llama como:

Código :

 {...}
   </div>
   <div id="right">hacia la derecha</div>
   <div id="clearing"></div>
</div>//Fin de la div Container
<div id="footer"></div>
   {...}

cuando en realidad se debería llamar como:

Código :

 {...}
   </div>
   <div class="right">hacia la derecha</div>
   <div id="clearing"></div>
</div>//Fin de la div Container
<div id="footer"></div>
   {...}

Sé que es algo muy básico pero alguien que es nuevo como yo puede confundirse. Excelente solución a mi el problema me daba en FF y lo solucioné con el clearing. Excelente!!!

Por dchacons

2 de clabLevel

Genero:Masculino

Envíale un mensaje privado

height: auto; no hace auto

Escribe una respuesta rapida