Problemas al maquetar la página web con CSS

[efelix]

Hola a todos.
Tengo el siguiente problema, me disculpan si el código CSS que voy a poner va encerrado dentro de otras etiquetas, pués aunque ya llevo tiempo como miembro de forosdelweb, creo que es la primera vez que posteo un tema en esta categoría.
Estoy leyendo un manual, muy bueno por cierto, sobre las CSS, es un libro de Wrox titulado Accesible Xhtml and Css Web Sites Problem, Design and Solution.
Todos los ejercicios que vienen en el mismo los he ido desarrollando para que el aprendizaje sea más eficiente.
Reconozco que mucho de los ejercicios han sido probados usando Netscape Navigator y no el Internet Explorer, aunque el libro explica muy claramente cuales son las características de las Css que no funcionan o que no tienen implementación en determinados browser.
Pues bueno voy al grano, hay algo que me está dando un poco de trabajo entender, y es lo relacionado con los layouts para web usando dicha tecnología, especifícamente los <div>, hay un ejemplo en el libro de un layout con dos columnas, una barra de navegación a la izquierda y el contenido principal en otro <div> que se coloca a la derecha de este, por ejemplo es así:
[CSS]
div#navigation {
float:left;
width:200px;
height:100%;
color:#ffffff;
background-color:#666666;
border:1px solid #000000;
padding:5px;}

div#content {
margin-left:213px;
width:600px;
height:100%;
background-color:#ffffff;
border:1px solid #000000;
padding:5px;}

a:link, a:visited {color:#ffffff;}
a {display:block;}
[/CSS]
Según la imagen que viene en libro esto funciona perfectamente bien, repito en Netscape Navigator se ven los <div> uno al lado del otro. Ahora cuando he probado el ejemplo en Internet Explorer me sale el div con la barra de navegación a la izquierda y el otro div donde va el contenido principal en vez de estar al lado de este, aparece debajo a la derecha después de la esquina ingerior derecha del div donde esta la barra de navegación, es como si existiera algo arriba del mismo que impide que se coloque al lado a la derecha, es decir uno al lado del otro.
La máquina donde trabajo tiene instalado como SO Windows 2003 server con la versión 6.0.3790 del IE. Dónde está el error?.
Disculpen lo denso del mensaje.
Muchas Gracias.

[hades87]

Pues en que los divs por comportamiento nativo se sitúan siempre uno debajo del otro, con lo que a cada div le has de poner un float, al de la izquierda left y al de la derecha right

[efelix]

Gracias por tu respuesta.
Pues te diré que agregué el float: right al div donde va el contenido y nada sigue haciendo lo mismo.
Además de eso, me pregunto, con la propiedad margin-left: 213px no es suficiente, he entendido tu explicación, se que los block elements se colacan uno debajo del otro, pero bueno no funciona, y en libro de Wox no hace alusión a nada de eso, en la imagen se ve todo funcionando a la perfección, aunque acoto en la imagen se ve que es en el Netscape Navigator.
Qué crees que pueda ser?.
Gracias nuevamente.

[Wasper]

Hola, para que los DIV se te coloquen uno al lado de otro los 2 DIVs deben tener float:left, ahora bien si quieres separar el DIV de la derecha al de la izquierda utilizas en el de la derecha margin-left:XXXpx esto es el empuje (margen) y lo que hace es alejarse del que esta pegado.

Un ejemplo facil:
.div1{
width:100px;
height:100px;
float:left;
background:#000;
}
.div2{
width:100px;
height:100px;
float:left;
background:#00a;
margin-left:20px;
}

Espero que te sirva...

SAludos, Jose
}

[efelix]

Gracias Wasper por tu respuesta, pero no es necesario poner a los div la propiedad float, el problema estaba en el ancho de los div, pues reduje el ancho de los dos y todo queda perfectamente bien.

[Wasper]

Ok. ¿Para que resolucion estas trabajando?

Saludos, Jose

[jomaruro]

Hola:

El IE6 da muchos problemas con el CSS, algunas de las propiedades no las reconoce como debería, yo te aconsejaría que te bajaras el Firefox y fueras probando los ejemplos del libro con él.

El día que tengas que hacer una página web, hazla para Firefox y reajusta después lo que no funcione en IE.

Saludos.