el div contenido se sale fuera del div cuadro

gingerk · #1 (**permalink**) 30/04/2006, 14:32

por que me hace esto
http://usuarios.lycos.es/tabla2006/articulos.php
como lo soluciono?

gingerk · #2 (**permalink**) 30/04/2006, 14:34

mirar como queda en firefox

Blueeye · #3 (**permalink**) 01/05/2006, 11:56

es cierto a mi me pasa exactamente lo mismo, y asi no vale la pena maquetar con divs..

all-ill · #4 (**permalink**) 01/05/2006, 14:22

En la hoja de estilos css elimina "height:50em;" de "#cuadro" o ponle 100%

A ver si así va mejor...

----
En la hoja parece que usas:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

En ese caso sería más conveniente usar <br/> por <br>, <img src="" /> por <img>.
Las letras con acentos y otros símbolos especiales podrías cambiarlas por su representación como carácter especial (á >> á etc)

espero que te sea de ayuda

Salu2

SiR.CARAJ0DIDA · #5 (**permalink**) 01/05/2006, 15:02

y pero ustedes son vivos, si le dicen a la capa que tiene que tener 50em de alto si usas un navegador inteligente como Firefox lo respeta, en cambio IE no entiende y agranda la capa contenedora. Si te basas en el modelo de bill gates para maquetar en capas te va a ir muy mal.

gingerk · #6 (**permalink**) 01/05/2006, 18:36

lo de 50em fue por probar, la original era 100% y pasaba exactamente lo mismo.
pues estoy muy cabreada con este tema , asi q estoy haciendo la web con tablas hasta q encuentre una solucion q parece q no la voy a encontrar.
Lo siento ciegos!! :( lo intente

Blueeye · #7 (**permalink**) 01/05/2006, 20:26

bueno, hay alguna solución estandar para que los float:left; por ejemplo no se salgan del contenedor! ???

Blueeye · #8 (**permalink**) 01/05/2006, 21:11

Encontre una solución, no se si les paresca bien: http://www.publicars.com.mx/divtest

frijolerou · #9 (**permalink**) 01/05/2006, 21:22

gingerk:

Tal como mencionaban antes... en navegadores como Firefox u Ópera (y cualquier otro que tenga un buen soporte de CSS) cuando a un elemento le das una determinada altura, ésta siempre se va a mantener fija, independiente de la cantidad de contenido que pongas dentro del elemento. Por el contrario, en Internet Explorer esta altura no queda fija, y aumenta a medida que aumenta el contenido. En ese sentido, en IE la propiedad height se comporta igual que la propiedad min-height, la cual es compatible con el resto de navegadores.

Desde ese punto de vista tienes 2 opciones:

1. No especificar ninguna altura para el DIV, y dejar que sea su propio contenido el que condicione su tamaño.

2. Si se te hace necesario especificar la altura del DIV, deberías jugar con height (para IE) y con min-height (para el resto de navegadores). Para eso tienes varios métodos:

Método 1.
Definir la altura del DIV mediante min-height. Y para Internet Explorer definir su altura mediante height y una expresion javascript (así IE sólo entenderá height y el resto de navegadores solo entenderá min-height.

Código:

#elDiv{
    min-height:100px;
    height:expression(100 + 'px');
    }

Nota: si quieres darle una altura de 100%, aparte de cambiar px por % en el código anterior, también debes definir para los elementos HTML y BODY una altura de 100% mediante la propiedad height (al parecer en este caso ya no se requiere min-height).

Código:

html, body{
    height:100%;
    }
#elDiv{
    min-height:100%;
    height:expression(100 + '%');
    }

all-ill · #10 (**permalink**) 02/05/2006, 05:56

Para los problemas con float y otros problemas con IE:
http://www.positioniseverything.net/explorer.html

gingerk · #11 (**permalink**) 02/05/2006, 08:43

pues muchas gracias, lo probare.
un beso.

furoya · #12 (**permalink**) 08/05/2006, 11:28

Cita:

Iniciado por SiR.CARAJ0DIDA

...si usas un navegador inteligente como Firefox...Si te basas en el modelo de bill gates para maquetar en capas te va a ir muy mal...

Solamente acotar que al margen de lo que pueda pensar cualquier persona con dos dedos de frente sobre una opinion 'muy' personal sin ningún apoyo o aclaración técnica, sí es cierto que el modelo que usa IE es bastante distinto al que propone el estándar, pero no sé si es mejor que el de FF, que tampoco estoy seguro de que respete las recomendaciones. -aunque como no estoy al tanto de lo que está aprobado y lo que no, tal vez habría que poner algún enlace al párrafo correspondiente en el sitio del W3C-

Cita:

Iniciado por frijolerou

...en navegadores como Firefox u Ópera (y cualquier otro que tenga un buen soporte de CSS) cuando a un elemento le das una determinada altura, ésta siempre se va a mantener fija, independiente de la cantidad de contenido que pongas dentro del elemento. Por el contrario, en Internet Explorer esta altura no queda fija, y aumenta a medida que aumenta el contenido...

Este tipo de mensajes me gustan mucho más.

Agrego un par de datos a tu respuesta, frijolerou. Para empezar, un enlace

CSS Min-Height Attribute Example

No hace falta usar expression como hack, se puede poner al final de las propiedades

Código:

#miDiv {min-height:100px; _height:100px; }

y el guión bajo sirve para que solamente lo vea el IExplorer, y el estar al final nos asegura que va a 'pisar' el valor anterior.

Me parece que la mejor forma de hacer ésto es

Código:

#miDiv {height:100px; overflow:scroll; /*auto*/}

Verán, las pruebas que recuerdo en FF me aceptaban la altura en una caja, pero el contenido se desbordaba cuando se pasaba de la medida . En el caso del IE, la caja se ajustaba al contenido, porque en una página web el contenido es siempre más importante que el diseño. Es cierto que hay sitios de 'web-artistas' donde "el diseño es el mensaje", pero lo más lógico es que prime el texto, las imágenes, los formularios; y recordemos que si no le damos a todo una medida absoluta y evitamos que el usuario la cambie, se supone que no podemos controlar cómo se verá nuestro sitio en cada navegador ... por lo tanto no sabemos si nuestro contenido va a caber realmente en su caja.

Lo que debe recomendar el estándar es que el contenido no se desborde, y ofrezca algún método -como las barras de desplazamiento- si no cabe.

Por supuesto que hay muchos casos en que las barras no son prácticas y habrá que inventar otra cosa, pero mientras tanto : o las usamos o adaptamos a los navegadores para que funcionen como el IE.

SPAWN3000 · #13 (**permalink**) 14/08/2008, 21:58

Bueno, no ley mucho... pero mira si esto te sirve de algo
.................................................. .......................................

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" lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding: 0;}
html, body {height: 100%;overflow: hidden;}
#presence{z-index:99;position:absolute;bottom:0px;right:0px;}

#envoltorio {overflow: auto;height: 96%;}

#presence{color:#111111;font-size:11px;height:25px;padding:0;margin-right:15px;}
#presence.full{margin-right:0;width:100%; background:#ccc;}
.full #presence_bar{float:right;}

div#CentradaLL {
margin: 7% auto 0 auto;
min-width:680px;
width:80%;
min-height:700px;
height:auto!important;
height:700px;
background:#666666;
padding:0;
}
div#contenedorD {
background:#fff; border:1px solid;
}
div#statusb { top:100%; width:100%; height:22px; left:0px;
background:#D7D4C5; position:absolute; z-index:100; margin-top:-22px;
padding:0;
float:right;
}
</style>
</head>
<body class="chat_body">
<div id="envoltorio">
<div id="CentradaLL">
<div id="contenedorD">Hola..</div>
</div>
</div>

<div id="presence" class="full">Barra</div>
</body>
</html>

JavierB · #14 (**permalink**) 15/08/2008, 01:21

El mensaje original es de hace más de 2 años. Por favor, no reviváis temas tan antiguos.

Saludos,