Durante el desarrollo de las columnas de un web, a veces en algunos navegadores una de las columnas se desplaza a la parte de abajo, este error es producido por un par de pixeles de ancho en alguna de las columnas, aquí hay un log de una conversa con un amigo, donde traté de explicarle como resolver este problema aplicando un hack de css (según lo que ví en la web se llama “Box Model”); puse toda la conversa para tratar de ser lo más didáctico que puedo, espero que les sirva

Los caminos de la vida… dice:
bueno mi consulta en particular era como meter ese hack q me diste la otra vez, para que el menú no se vaya para abajo
º dice:
bueno
º dice:
es sencillo mira, teóricamente en el css esto es interpretado por todos los browsers
#contenido { width:100px; }
º dice:
le dices que el ancho de la capa “contenido” es 100 pixeles, pero a veces no se ve bien en todos los browsers, entonces por ejemplo haces que esto se vea bien en Internet explorer poniendole #contenido { width:100px; } , y debajo usaremos una expresión que no es interpretada por el explorer solo por firefox (en este caso) html>body #contenido { width:105px; }
º dice:
lo pondremos asi
 
#contenido { width:100px; }
html>body #contenido{ 105 px; }
º dice:
todos los browsers interpretan la primera línea (100px) incluido el explorer, pero en la segunda línea le estás diciendo solo a firefox que corrija nuevamente el ancho de esa capa por el nuevo valor asignado (105px)
º dice:
esa segunda línea el explorer no la interpreta entonces queda bien cuadrado, y en firefox se corrije el error
º dice:
no se si me explico bien
Los caminos de la vida… dice:
a ver
Los caminos de la vida… dice:
creo q si, eso lo sustituyo en la parte donde se especifica el ancho del contenido
Los caminos de la vida… dice:
le pongo eso de
Los caminos de la vida… dice:
#contenido { width:100px; }
html>body #contenido{ 105 px; }
Los caminos de la vida… dice:
con eso le digo al firefox q lo haga un poco mas ancho de lo q es realmentre
º dice:
asi es
º dice:
pero sin borrar el anterior, solo le añades el nuevo valor debajo de lo que ya está hecho
º dice:
el que dice html>body #contenido
Los caminos de la vida… dice:
??
º dice:
es decir
º dice:
en tus hojas de estilo, ya están definidas las propiedades de los objetos
Los caminos de la vida… dice:
si
º dice:
no necesitas borrar nada, sino solo añadirle una línea donde sea necesario
º dice:
generalmente es algún ancho
º dice:
width
º dice:
hay una etiqueta que modifica las columnas de la derecha e izquierda
º dice:
en aquella debe ser
Los caminos de la vida… dice:
mmm
º dice:
a ver deja que veo
º dice:
#menu {
margin: 0;
padding: 0 0 0 5;
width: 255px;
float: left;
font-family: "Verdana Geneva Arial Helvetica sans-serif";
font-variant: normal;
font-size: 11px;
background-image: url(build/white_bar_top.jpg);
background-repeat: repeat-x;
background-position: center top;
}
º dice:
un parche podría ir ahí debajo
º dice:
ese es el menu de la izquierda
º dice:
mira ahí hay una propiedad width: 255px;
º dice:
si necesitas, puedes reducir ahi
º dice:
html>body #menu { width: 250; }
º dice:
por ejemplo
º dice:
la cantidad será cosa de que vayas probando reduciendo el número poco a poco hasta que la otra columna no se corra hacia abajo

Los caminos de la vida… dice:
lo q no me queda claro es donde meto esto
Los caminos de la vida… dice:
#contenido { width:100px; }
html>body #contenido{ 105 px; }
Los caminos de la vida… dice:
creo un nuevo tag o algo asi
Los caminos de la vida… dice:
?
º dice:
a ver
º dice:
tienes una etiqueta que dice #menu { blah blah blah }
Los caminos de la vida… dice:
okas
º dice:
dentro de esa etiqueta hay una propiedad que dice width: 255px;
º dice:
entonces, ahí se está indicando el ancho del menú de la izquierda
º dice:
lo encontraste?
Los caminos de la vida… dice:
si si
º dice:
entonces, ese numero que tiene ahí, es para el explorer, se ve bien
Los caminos de la vida… dice:
ok
º dice:
abajo de toda la etiqueta #menu, meteremos el hack:
 
#menu{
blah
blah
width: 255px;
blah
blah
}
html>body #menu {width:250px; } <– aki
Los caminos de la vida… dice:
ah ya
Los caminos de la vida… dice:
esta bien ese "html>" ?
Los caminos de la vida… dice:
no deberia abrirlo con "<" ??
º dice:
no, es css, no funciona como en el lenguaje html
Los caminos de la vida… dice:
ok
Los caminos de la vida… dice:
para definir el widht lo pongo un poco mas ancho
º dice:

mas angosto mas bien
Los caminos de la vida… dice:
mmm pero en realidad seria mas angosto
Los caminos de la vida… dice:
ok vamos a ver
Los caminos de la vida… dice:
ya esta, ya no se desplaza hacia abajo
º dice:
cool
Los caminos de la vida… dice:
sip creo q ya con eso lo soluciona gracias!
º dice:
de nada