Estoy elaborando un proyecto en PHP para la universidad, y tengo problemas en el diseño del index al momento de cargarlo en el mozilla y chrome!.
Pero, si lo cargo con IE y safari todo eta perfecto!
Creo que los errores nacen, porque no estoy usando el "float" y el "clear" adecuadamente. Asi que espero que me ayuden con esto.
A continuación comparto los códigos:
--------------------------------------------------------------
File: index.php
Código
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style01.css"> </head> <body> <div id="div_top1"> <div id="container_top1"></div> </div> <div id="div_top2"> <div id="container_top2">C</div> </div> <div id="div_body"> <div id="container_body"> <div id="body_left"> <div id="box1"></div> <div id="box2"></div> </div> <div id="body_right"> <div id="box_a"></div> <div id="box_b"></div> <div id="box_c"></div> </div> </div> </div> <div id="div_footer"> <div id="container_footer"></div> </div> </body> </html>
--------------------------------------------------------------
File: style01.css
Código
--------------------------------------------------------------
@charset "utf-8"; #div_top1 { } #div_top1 #container_top1 { width: 980px; margin-right: auto; margin-left: auto; background-color: #6C9; height: 100px; } #div_top2 { } #div_top2 #container_top2 { background-color: #900; width: 980px; margin-right: auto; margin-left: auto; } #div_body { } #div_body #container_body { background-color: #9F0; margin-right: auto; margin-left: auto; width: 980px; height: auto; } #div_body #container_body #body_left { width: 200px; background-color: #09F; float: left; clear: left; margin-top: 10px; height: auto; } #div_body #container_body #body_left #box1 { background-color: #669; height: 150px; width: 200px; } #div_body #container_body #body_left #box2 { background-color: #669; height: 150px; width: 200px; margin-top: 10px; } #div_body #container_body #body_right { background-color: #0CC; height: auto; width: 770px; float: left; margin-left: 10px; margin-top: 10px; } #div_body #container_body #body_right #box_a { height: 150px; width: 770px; background-color: #990; } #div_body #container_body #body_right #box_b { height: 200px; width: 380px; margin-top: 10px; background-color: #C09; float: left; margin-bottom: 10px; } #div_body #container_body #body_right #box_c { height: 200px; width: 380px; background-color: #C09; float: left; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; clear: none; } #div_footer { } #div_footer #container_footer { background-color: #036; margin-right: auto; margin-left: auto; width: 980px; height: 150px; clear: both; }
Con todo esto, el index de ve asi en el mozilla:
Donde se puede observar que el background-color del #container_body es blanco.
Y si revisamos el css, tenemos que:
Código
#div_body #container_body { background-color: #9F0; margin-right: auto; margin-left: auto; width: 980px; height: auto; }
Por lo que el index debería ser de la siguiente forma (se ve asi en IE y safari):
Espero que me hayan entendido, y si tienen una mejor forma para trabajar el diseño del index me gustaría que me lo hagan saber.
.