Tema: div no muestra color de fondo
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 17/11/2011, 18:32
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: div no muestra color de fondo
Tenes que remover el float, pero a continuación de sidebar y content, hacerlo en el footer no sirve porque esta fuera del container

asi (cambié colores y puse bordes para que se destaque)

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9.  
  10. /* ---------------------------------------------- Bloques Principales ---------------------------------------------- */
  11.  
  12. .container { /* Té tot el cos de la pagina */
  13. width: 100%;
  14. margin: 0 auto; /* el valor automático de los lados, unido a la anchura, centra el diseño */
  15. border: solid yellow 1px;
  16. }
  17.  
  18. .header {
  19. width: 100%;
  20. background-color: #666;
  21. /* background-image: url(../images/fondocabecera.png); */
  22. height: 150px;
  23. margin-top: 0;
  24. margin-right: auto;
  25. margin-bottom: 0;
  26. margin-left: auto;
  27. }
  28.  
  29. .footer {
  30. padding: 10px 0;
  31. background: #666;
  32. bottom: 0;
  33. position: relative;/* esto da a IE6 hasLayout para borrar correctamente */
  34. clear: both; /* esta propiedad de borrado fuerza a .container a conocer dónde terminan las columnas y a contenerlas */
  35. text-align:center;
  36. color:#999;
  37. font-size: 9px;
  38. width: 100%;
  39. top: 150px;
  40. }
  41.  
  42. /* -------------------------------------------------- SubBloques -------------------------------------------------- */
  43.  
  44. .headerinterior {
  45. width: 980px;
  46. height: 150px;
  47. margin: 0 auto;
  48. }
  49.  
  50.  /*--ESTE ME DA EL ERROR-- */
  51.  
  52. .subcontainer {
  53. background-color: red;
  54. margin: auto;
  55. width: 980px;
  56. border: solid cyan 1px;
  57. }
  58.  
  59. /*-- HASTA AQUI -- */
  60.  
  61. .sidebar1 {
  62. float: left;
  63. width: 150px;
  64. margin-top: 5px;
  65. margin-left: 5px;
  66. padding: 10px;
  67. /* Border amb "relleu" dalt i esquerra mes clar que baix i dreta. */
  68. background-color:green;
  69. border-top: 2px groove #CCC;
  70. border-left: 2px groove #CCC;
  71. border-right: 2px groove #666;
  72. border-bottom: 2px groove #666;
  73. }
  74.  
  75. .content {
  76. padding: 10px 0;
  77. width: 775px;
  78. float: left;
  79. margin: 10px;
  80. }
  81.  
  82. div.prueba {
  83. width: 500px;
  84. background-color: blue;
  85. }
  86.  
  87. .limpiar {
  88. clear: both;
  89. }
  90. /*]]>*/
  91. </style>
  92. </head>
  93. <body>
  94. <div class="header">
  95. <div class="headerinterior">header interior</div>
  96. </div>
  97. <div class="container">
  98. <div class="subcontainer">    
  99.  <div class="sidebar1">    
  100. sidebar
  101. </div>
  102. <div class="content">
  103. content
  104. </div>
  105. <div class="limpiar"><!-- Eliminar el float --></div>
  106. </div>
  107. </div>
  108. <div class="footer">footer</div>
  109. </body>
  110. </html>

mirá las lineas 87 y 105 de mi ejemplo, de todas maneras un poco complicado el código, no se bien que esquema queres pero creo que se podría simplificar.

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.