Problema con DIVS+CSS

[demono]

Hola gente, soy nuevo en el foro aunque hace bastante vengo leyendolo.
Hace algunas semanas estoy intentando resolver un problema con el diseño de mis sitios web. Hará 2-3 meses migré del diseño con tablas a usar divs.

El problema es que vengo usando DIVs flotantes para diseñar la web en 2 columnas. El Div izquierdo es el del menú y el derecho el del contenido de la web. El problema está en que el div derecho se me va para abajo...¿Como? No lo se, simplemente se baja =(

El codigo CSS que estoy usando es:

Código:

.main {
font-weight: normal;
margin:0 auto 0 auto;
padding:3px;
padding-left:5px;
white-space:normal;
border-width:0px;
width: 937px;
font-family: "Arial", Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #CCCCCC;
text-align: left;
background-color: #F2F4F3;
display:table;
min-height: 700px;
position:relative;

}

.divmenu{
float:left;
font-weight: normal;
margin-left:5px;
padding:3px;
white-space:normal;
border-width:0px;
width: 198px;
font-family: "Arial", Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
background-color: #F2F4F3;
margin-bottom: 15px;
}

.divcont {
margin-right:5px;
float:right;
font-weight: normal;
padding:4px;
white-space:normal;
border-width:0px;
width: 670px;
font-family: "Arial", Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
background-color: #F2F4F3;
margin-bottom: 15px;
position:static;
}

Y el codigo HTML seria..

Código HTML:

<div class=main>
 <div class=divmenu>Menu</div>
 <div class=divcont>Contenido</div>
</div> 

Estoy quemandome la cabeza, lei ya varios tutoriales acerca de posicionamiento de DIVs y no pude solucionarlo.
Me podrán dar una mano?

Mil gracias!

[Calizman]

Saludos!!

Primero, antes que nada, agregale "" a los divs, porque no creo que funcionen sin ellos... y para tu problema, intenta cambiando de lugar los divs.. suena algo tonto pero aveces eso ha solucionado mi problema, quedaria algo asi:

<div class="main">
<div class="divcont">Contenido</div>
<div class="divmenu">Menu</div>
</div>

Intentalo, y si funciona me dices, sino seguimos probando si?

Hasta Luego!!

[opzina]

hazz lo q caliiz (de indiana JOnes?? jeje) te ha comentado.

NO entiendo esto:

margin: 0 auto 0 auto; ??

Creo que hay problemas con los width y padding..habria q ver eso..

saludos.

[AlbertoGarcia]

No deberías tener problemas, la suma de tus cajas divmenu y divcont no supera la de la caja contenedora main y los floats son correctos. Tu problema puede estar en otra parte del código. Lo que sía tenías es mucha linea de código redundante, te interesaría investigar la herencia.

Código HTML:

       .main {
                font-weight: normal;
                margin: 0 auto;
                padding: 3px 3px 3px 5px;
                width: 937px;
                font-family: "Arial", Verdana, Helvetica, sans-serif;
                font-size: 11px;
                color: #CCCCCC;
                text-align: left;
                background-color: #F2F4F3;
                display: table;
                min-height: 700px;
                position: relative;
            } 
			
	.divmenu {
                float: left;
                margin-left: 5px;
                padding: 3px;
                width: 198px;
                color: #333333;
                background-color: #F2F4F3;
                margin-bottom: 15px;
            } 
			
	.divcont {
		float: right;
                margin-right: 5px;
                padding: 4px;
                width: 670px;
                color: #333333;
                margin-bottom: 15px;
            }

Salud!

[jomaruro]

Hola:

No sé que navegador estás usando ni que resolución, pero en FF tu código me ha funcionado perfectamente. Tienes que tener en cuenta que los anchos de los div's divmenu y divcont más el margin más el padding más el borde no pueden superar el ancho del div main.

Saludos.

[demono]

Ahi me pongo a probar lo que dijron mas arriba.

Por las dudas dejo screenshots de como se ve...
Normalmente se ve asi:
zgamerz.com.ar/noticias/bien.jpg


Algunas veces se ve asi:
zgamerz.com.ar/noticias/problema.jpg



El tema es que solo se ve como la 2da screenshot en contadas ocasiones aunque claro, no por eso voy a dejar que siga haciendolo. En las imagenes les cambie el background-color por uno que contraste para que se vea, el div grande blanco es main , el de la izquierda divmenu y el de la derecha divcont

Puede ser que en algun momento esté cargandose mal la hoja de estilos y por eso hace eso?

[demono]

Iniciado por jomaruro

Hola:

No sé que navegador estás usando ni que resolución, pero en FF tu código me ha funcionado perfectamente. Tienes que tener en cuenta que los anchos de los div's divmenu y divcont más el margin más el padding más el borde no pueden superar el ancho del div main.

Saludos.

Estoy usando Firefox en este momento con 1280x1024 pero lo probé tambien con 1024x768 (La web la creé en esa resolucion por obvias razones) y pasa lo mismo. El tema no es el ancho de los divs ya que como se ve en las imagenes de arriba no se superponen enningun momento. Lo raro es que cuando pasa eso tarda unos segundos mas en cargar la web.

Ah, y ya que me olvidé, lo hace con cualquier cosa que le mande en el divcont , actualmente estoy usando Includes de PHP para meterle ahi diferentes archivos, pero independientemente del que sea hace eso.

[demono]

Acabo de probar con IE 6 y Chrome y funciona perfectamente. Por lo que lei en otros threads de este foro el tema puede ser un bug del firefox que hace que el div se vaya para abajo como muestran las siguientes imagenes:

zgamerz.com.ar/noticias/bien.jpg
zgamerz.com.ar/noticias/problema.jpg

Ahora bien, el bug apareceria cuando la hoja de estilos no se carga rapidamente. Alguien tuvo algun problema similar? Es una solucion pausible escribir el estilo mediante una etiqueta style para que se cargue mas rapidamente o estoy tirando cualquiera?

[AlbertoGarcia]

Nunca había tenido ese problema, ni cargando tres hojas diferentes. ¿cuánto pesa tu hoja de estilos? el máximo recomendable son 25kb. También es muy importante eliminar declaraciones redundantes como te dije en el post anterior. Aquí tienes varias herramientas online para optimizar tu css.

Salud!