Tema: Desaparece y aparece.
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/05/2013, 12:40
Avatar de iEnrique
iEnrique
 
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 11 años
Puntos: 5
Desaparece y aparece.
A ver, estoy haciendo una web y tengo un <div></div> que contiene dentro otro <div></div> y que éste último quiero que se agrande a medida que se agrande el primero y que quede unos margenes. Os dejo los códigos:

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Habbosfera</title>
  5.     <link rel="stylesheet" type="text/css" href="style.css">
  6. </head>
  7.  
  8. <body>
  9.     <header>
  10.         <div id="header"></div>
  11.         <div id="shadow"></div>
  12.     </header>
  13.     <div style="width: 1000px; position: relative; margin-left: auto; margin-right: auto;">
  14.         <div style="width:auto;float:left;">
  15.             <div class="divgeneral"><div class="blue"></div></div>
  16.         </div>
  17.         <div style="width:auto;float:left;margin-left:100px;">
  18.             <div class="divnoticia"><div class="blue"></div><span class="tabletfont">
  19.                 <h2>Markku Ignatius, nuevo CEO de Sulake</h2>
  20.                 holaaa
  21.             </span>
  22.             </div>
  23.         </div>
  24.     </div>
  25. </body>
  26. </html>

Código CSS: 
Ver original
  1. body{
  2.     background-image: url(background.png);
  3.     font: normal 13px arial,sans-serif;
  4. }
  5.  
  6. #header {
  7.     background-image: url(header.png);
  8.     height: 218px;
  9.     margin: -8px;
  10.     background-repeat: repeat-x;
  11. }
  12.  
  13. #shadow {
  14.     background: white;
  15.     height: 3px;
  16.     background-repeat: repeat-x;
  17.     margin-top: 9px;
  18.     margin-left: -8px;
  19.     margin-right: -8px;
  20.     margin-bottom: 20px;
  21. }
  22.  
  23. .divgeneral {
  24.     background: white;
  25.     width: 370px;
  26.     height: 400px;
  27.     border-radius: 9px;
  28.     box-shadow: 0px 0px 20px #888888;
  29.     -webkit-box-shadow: 6px 1px 10 #888888;
  30.     -moz-box-shadow: 6px 1px 10 #888888;
  31.     padding: 0px 0px 0px 0px;
  32. }
  33.  
  34. .divnoticia {
  35.     background: white;
  36.     width: 528px;
  37.     height: 500px;
  38.     border-radius: 9px;
  39.     overflow: hidden;
  40.     box-shadow: 0px 0px 20px #888888;
  41.     -webkit-box-shadow: 6px 1px 10 #888888;
  42.     -moz-box-shadow: 6px 1px 10 #888888;
  43. }
  44.  
  45. .blue{
  46.     background-image: url(noise-blue.png);
  47.     border-top-left-radius: 9px;
  48.     border-bottom-left-radius: 9px;
  49.     width: 72px;
  50.     height: 99.5%;
  51.     vertical-align: middle;
  52.     background-repeat: repeat-y;
  53.     float: left;
  54.     margin: 1px 0px 1px 1px;
  55. }
  56.  
  57. .tabletfont{
  58.     margin: 4px 0px 0px 15px;
  59.     float: left;
  60. }

Donde quiero que os fijéis es aquí:

Código HTML: 
Ver original
  1. <div style="width:auto;float:left;margin-left:100px;">
  2.             <div class="divnoticia"><div class="blue"></div><span class="tabletfont">
  3.                 <h2>Markku Ignatius, nuevo CEO de Sulake</h2>
  4.                 holaaa
  5.             </span>
  6.             </div>

Y sus correspondientes códigos CSS:

Código CSS: 
Ver original
  1. .divnoticia {
  2.     background: white;
  3.     width: 528px;
  4.     height: 500px;
  5.     border-radius: 9px;
  6.     overflow: hidden;
  7.     box-shadow: 0px 0px 20px #888888;
  8.     -webkit-box-shadow: 6px 1px 10 #888888;
  9.     -moz-box-shadow: 6px 1px 10 #888888;
  10. }
  11.  
  12. .blue{
  13.     background-image: url(noise-blue.png);
  14.     border-top-left-radius: 9px;
  15.     border-bottom-left-radius: 9px;
  16.     width: 72px;
  17.     height: 99.5%;
  18.     vertical-align: middle;
  19.     background-repeat: repeat-y;
  20.     float: left;
  21.     margin: 1px 0px 1px 1px;
  22. }
  23.  
  24. .tabletfont{
  25.     margin: 4px 0px 0px 15px;
  26.     float: left;
  27. }

Y aquí viene mi pregunta, ¿qué error hay para que el elemento ".blue" desaparezca si le pongo un "height" en "auto" y aparezca cuando lo pongo en píxeles?¿cómo lo soluciono para que se quede con su "height:99.5%" y el .divnoticia se quede en "height:auto"?