No puedo ubicar el último div

[sergiodvera]

Hola, me surge un problema que le di mil vueltas y siempre queda peor. Lo cierto es que el div "contenido_10" me queda fuera del contexto del sitio, es decir, que hasta el "contenido_9" va todo perfecto utilizando float left o right, pero el 10 no va con nada. Esto me sucede solo en el documento html, sin embargo, cuando visualizo en la web se ve perfecto. Adjunto el css y el link donde está subido esta página. El código html se puede tomar desde el explorador. Desde ya gracias por la ayuda si es que la necesita. Saludos.

link: http://www.dragonrojo.net/china_2001_fosan.html

css:

/* CSS Document */

#contenedor {
top:20px;
width:1020px;
height:2713px;
margin:auto;
}
#barra_superior {
float:left;
width:1020px;
height:90px;
}
#escudo_lateral_dragon {
float:left;
width:267px;
height:102px;
}
#medio {
float:left;
width:484px;
height:102px;
}
#escudo_lateral_guangzhou {
float:left;
width:269px;
height:102px;
}
#lateral_mini_izq {
float:left;
width:19px;
height:27px;
}
#menu {
float:left;
width:982px;
height:27px;
}
#lateral_mini_der {
float:left;
width:19px;
height:27px;
}
#columna_izq {
float:left;
width:77px;
height:2494px;
}
#columna_der {
float:right;
width:77px;
height:2494px;
}
#contenido_1 {
float:left;
background-image:url(imagenes/china_2001_foshan_contenido1.jpg);
background-color:#FFFFFF;
background-repeat:no-repeat;
background-position:center;
margin-top:4px;
margin-left:4px;
width:182px;
height:705px;
}
#contenido_2 {
float:left;
background:#FFFFFF;
margin-top:4px;
width:327px;
height:705px;
}
#contenido_3 {
float:left;
background:#FFFFFF;
margin-top:4px;
margin-right:px;
width:349px;
height:705px;
}
#contenido_4 {
float:left;
background:#FFFFFF;
margin-left:4px;
width:349px;
height:395px;
}
#contenido_5 {
float:left;
background:#FFFFFF;
margin-right:4px;
width:509px;
height:395px;
}
#contenido_6 {
float:left;
background:#FFFFFF;
margin-left:4px;
width:349px;
height:572px;
}
#contenido_7 {
float:right;
background-image:url(imagenes/china_2001_foshan_contenido8.jpg);
background-color:#FFFFFF;
background-repeat:no-repeat;
background-position:center;
margin-right:4px;
width:182px;
height:1144px;
}
#contenido_8 {
float:right;
background:#FFFFFF;
width:327px;
height:1144px;
}
#contenido_9 {
float:left;
background:#FFFFFF;
margin-left:4px;
width:349px;
height:572px;
}
#contenido_10 {
float:left;
background:#FFFFFF;
margin-left:4px;
margin-right:4px;
width:858px;
height:246px;
}
#barra_inferior {
float:left;
width:1020px;
height:90px;
}

[gVenom]

Page Not Found - 404 Error Page
The page you are looking for (http://dragonrojo.net/china_2001_fosan.html) is not here.

:S

[sergiodvera]

Perdón, le yerré en el http, me faltó una "h"
es http://www.dragonrojo.net/china_2001_foshan.html

[gVenom]

Bueno, hay un problema y es que no se sabe como es que deberia estar.
Acaso es la imagen que deberia estar una sobre otra ?? que queden todas a la izquierda ?

[sergiodvera]

Lo que he podido averiguar es que los divs de distinto tamaño tanto de anchura como de altura, son complejos de armar, no es simplemente float:left para todos, sí es cierto que al poner float:left, inmediatamente te coloca un div seguido de otro. La cosa cambia cuando hay cuatro divs en una misma horizontal en tres columnas. Supongamos que en la columna 1 van dos divs del mismo alto y ancho (uno debajo del otro), en la segunda columna un div de cierto ancho y una altura igual a la suma de la columna 1 y lo mismo sucede con la tercer columna. Para que quede bien, debo intercalarlos (no en orden correlativo) en el documento html y variar el float entre left y right en el css.
El tema me surge en el documento html, creo que es una cuestión de visualización (creo que debo armar el archivo nuevamente), ya que se ve desfazado, sin embargo en la web se ve correcto, o por lo menos yo lo veo así desde mi navegador IE8 en mi computadora.

[gVenom]

Yo en la mia lo veo bien, por eso preguntaba.
Sobre los float, los div si tienen ancho definido, como debe de ser se ubican uno sobre otro en el flujo normal
1
2
3
4
Si les aplicas un left al primero y un right al segundo se ubican uno al lado del otro
1 2
3
4
el problema puede surgir si en algun momento los div anteriores no ocupan el ancho del contenedor y si no quiebras el float (float:none;) el contenido inmediato a los div se puede subir
1 3 2
4
Puedes revisar por ahi, si es que eso es lo que crees que te afecta.

Saludos,

[omarMusic]

Bueno una observación, yo entre con firefox y el pie de página se fue a otro lado, pero se soluciono aumentando un overflow:hidden en la regla css #texto_pie

Saludos!

[sergiodvera]

Gracias por lo datos de alineación de divs. Voy a probar. Creo que el problema es que se empacó el archivo html, ya que no toqué nada y ahora se desarmó todo peor para cualquier lado. Deberé armarlo de cero otra vez.
Lo que a mi me sucedió armando divs es lo siguiente (siguiendo tu ejemplo)

1 2 3
4 2 3
5 5 5
(cuando repito el número significa que el div es uno solo y ocupa esa altura o anchura)

Al ubicar los divs 1 (left) 2 y 3 (right) 4 (left) hasta ahí va todo bien, el problema me surgió en el 5, pero como ya dije, se me desarmó todo el html sin tocarlo. Voy a rehacerlo.

El tema complicado surge en esto:

1 2 3
4 2 5

intenté mil veces y el 5 no lo pude encajar de ningún modo, y si lo encajaba, se me desarmaba el 4.

Gracias de todos modos.
Saludos.

[gVenom]

un metodo sencillo para prevenir el div con float anterior es inmediatemente despues del 123 insertas un div sin ningun contenido asi <div style="float: none;"></div>
eso lo que hará será limpiar la propiedad float y asi no te afectará el siguiente div que incluyas.
Tambien se lo puedes poner a un br <br style="float: none;" />

[sergiodvera]

Gracias por los datos, los utilizaré en el futuro.
Igualmente tuve que sacar el archivo que estaba ya subido a la web, ya que cualquier propiedad que le agregué, ya sea float:none u overflow (como me indicó omarMusic) me terminó de desarmar el documento. Se veía como si el div del contenedor y todos los restantes no tuviesen ninguna propiedad.
Debo rehacerlo.
Saludos.