Problema con Firefox y dos columnas.

[WebDeveloperZ]

De ves en cuando me sabe aparecer la columna derecha justo cuando termina la izquierda en firefox. No me pasa en opera crome o ie. (es al azar, entro y aparece bien, vuelvo a entrar a los 10 min y se ve mal)

Es decir, aparece debajo de la columna izquierda cuando deberia aparecer al lado de esta. (deberia ser siempre como en el ejemplo 2 , ver grafico)

ej:



Solo pasa a veces, por lo tanto tiro bordes para ver que no se toquen y efectivamente no lo hacen, mi metodologia para las columnas es esta:

CSS:

Código:

<style type="text/css">
#madre { border:2px solid #CCCCCC; width:1000px; margin:auto;}
#madre #wrapper { clear:both; display:table; width:999px }
#madre #wrapper #izquierda { float:left; width:500px; border:1px solid black }
#madre #wrapper #derecha { float:right; width:494px; border:1px solid black }
</style>

HTML:

Código:

<div id="madre">
<div id="wrapper">
<div id="izquierda">asdasd<br />asdsadasd<br />sadsadasd</div>
<div id="derecha">asdasd</div>
</div>

Alguna idea ? gracias.

[talmente]

Hola, mi ra esto

madre width:1000px;

wrapper width:999px;

izquierda width:500px;

#derecha width:494px;


La suma de los tres div es superior a la de madre

[WebDeveloperZ]

Pero el wrapper esta dentro de la madre, es como tener un rectangulo apenas mas pequeño dentro del otro para luego poner dos mas pequeños.

No entiendo porque sumas los 3, saludos.

[kseso?]

Es por la interpretación distinta que hacen los navegadores del modelo de caja (box model): el espacio total es la suma del ancho + bordes laterales o que se considere a los bordes como parte del ancho total.

Reduce unos pixeles la anchura del div "izquierda" o "derecha" para evitarlo.

P.D.: en el código html que has colocado te falta por cerrar el div "madre"