Foros del Web » Creando para Internet » CSS »

Preblemas con FF en Float y Contenedor

Estas en el tema de Preblemas con FF en Float y Contenedor en el foro de CSS en Foros del Web. Tengo este codigo dentro del body: < div id="container"> <div class="content"> <h3 align="center">Directorio Web</h3> <div class="right"> <h2 class="caja">Buscadores/Correo</h2> <h1 class="cajab">Pagina Hotmail<br> Pagina Yahoo<br> Pagina Gmail<br> ...
  #1 (permalink)  
Antiguo 09/08/2005, 11:46
 
Fecha de Ingreso: mayo-2005
Mensajes: 19
Antigüedad: 11 años, 6 meses
Puntos: 0
Preblemas con FF en Float y Contenedor

Tengo este codigo dentro del body:

<div id="container">

<div class="content">
<h3 align="center">Directorio Web</h3>

<div class="right">
<h2 class="caja">Buscadores/Correo</h2>
<h1 class="cajab">Pagina Hotmail<br>
Pagina Yahoo<br>
Pagina Gmail<br>
Pagina Altavista<br>
Pagina Msn search</h1></div>

<div class="right">
<h2 class="caja">Buscadores/Correo</h2>
<h1 class="cajab">Pagina Hotmail<br>
Pagina Yahoo<br>
Pagina Gmail<br>
Pagina Altavista<br>
Pagina Msn search</h1></div>


</div>

</div>


Y en el Css, tengo este:

#container {
line-height: 80%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 500px;
background-color: #F9F9F9;
border: 1px solid #FFFFFF;
}

.content {
padding: 0px 0px 0px 0px;
background-color: #FFFFFF;
border: 2px solid #EBEBEB;
margin: 1px auto;
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
}

.caja {

background: #F2F2F2;
font-family: Eurostile;
fon-size: 14px;
border: 1px solid #EBEBEB;
margin: 2px;
padding: 3px;

color: #000000;
}

h2 {
color: #000000;
font-family: Arial;
font-size: 12px;
}

h1 {
color: #000000;
font-family: Arial;
font-size: 11px;
text-align: left;
line-height: 110%;
}

.cajab {
border: 1px solid #000000;
margin: 2px;
padding: 3px;
with: 100px;
color: #000000;
}

.right {
float: left;
width: 155px;
overflow: hidden;


}



El problema es que cuando aplico los <div class="right">
el contendio (content) se sale del contenerdor (container), esto en Firefox, porque en IE si lo mete dentro del contenedor, pero no se porque sea, y desde hace mucho no entiendo el problema y me pasa seguido.

se supone que todo este dentro del contenedor:

<div id="container">


TODO LO DEMAS

</div>

No se porque cuando aplico las clases de right para alinear las cajas, se sale del contenedor o ya no lo abarca, y me doy cuenta obviamente porque el contenedor tiene un color de fondo y cuando pasa el problema se nota luego luego pues ya no lo abarca, ojala y me puedan
ayudar.
  #2 (permalink)  
Antiguo 09/08/2005, 12:03
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 12 años, 5 meses
Puntos: 2
Hola,

Tu problema radica en lo siguiente: según las especificaciones del W3C el padre de un elemento "flotante" no debe adaptar su tamaño a su hijo, solo se adapta a los elementos que siguen el "flujo tradicional". En este caso IE es quien no cumple el estándar.

Puedes resolver el problema colocando un elemento en bloque (un div puede servir) después de tus elementos flotantes (deber ser su hermano), y asignarle la regla clear: both (o la que convenga). De esta forma, lo forzas a colocarse por debajo de los elementos "flotantes" y a su vez, forzas a su padre a adaptar su tamaño para contenerlo.

Espero que resulte clara la explicación.

PD: Te recomiendo que bautizes tus clases e Id's de acuerdo a su función y no su apariencia.
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."
  #3 (permalink)  
Antiguo 09/08/2005, 12:26
 
Fecha de Ingreso: mayo-2005
Mensajes: 19
Antigüedad: 11 años, 6 meses
Puntos: 0
Entendido, muchas gracias, me resolviste dos problemas de un tiro.
supongo que algo asi te referias no?

<div style="clear: both;"> </div>

gracias.
  #4 (permalink)  
Antiguo 09/08/2005, 12:30
 
Fecha de Ingreso: mayo-2005
Mensajes: 19
Antigüedad: 11 años, 6 meses
Puntos: 0
Por cierto si sabia que IE era el que no respetaba los estandares, pero a veces es frustrante que ironicamente -- Se vea bien, por las razones incorrectas, ó, Se vea mal por las razones correctas.--- jajaja
  #5 (permalink)  
Antiguo 09/08/2005, 16:26
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 13 años, 8 meses
Puntos: 2
frustrante no creo que sea la palabra mas adecuada para describirlo, a mi un editor que no me da la opcion de elegir el motor de renderizado no me sirve por razones obvias
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #6 (permalink)  
Antiguo 21/08/2011, 18:55
 
Fecha de Ingreso: marzo-2011
Ubicación: Capital Federal Argentina
Mensajes: 2
Antigüedad: 5 años, 8 meses
Puntos: 0
Respuesta: Preblemas con FF en Float y Contenedor

Hola, probando y buscando por la web llegué una solución.

Agregar al div contenedor:

display: inline-block;

esto hizo que funcione, no entiendo bien la lógica pero funcionó.

Saludos
  #7 (permalink)  
Antiguo 21/08/2011, 18:59
 
Fecha de Ingreso: marzo-2011
Ubicación: Capital Federal Argentina
Mensajes: 2
Antigüedad: 5 años, 8 meses
Puntos: 0
Respuesta: Preblemas con FF en Float y Contenedor

encontré otra solucion.

agregar debajo de los div flotantes un div que no se verá

<div style="clear:both"></div>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:43.