Tema: Problema con divs de ancho fijo y variable
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 14/11/2010, 07:56
Avatar de angelAparicio
angelAparicio
 
Fecha de Ingreso: julio-2009
Ubicación: Sevilla
Mensajes: 307
Antigüedad: 15 años, 7 meses
Puntos: 22
Respuesta: Problema con divs de ancho fijo y variable
Prueba con este código. He añadido otro div para contener a gris y verde:

Código HTML: 
Ver original
  1. <!DOCTYPE html 
  2.   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.   <head>
  6.     <title>Pruebas</title>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <style type="text/css">
  9.         div {
  10.         border: 1px solid transparent;
  11.         padding: 0;
  12.         margin: 0;
  13.         }
  14.         
  15.         .rojo {
  16.             width: 210px;
  17.             float: right;
  18.             background-color: red;
  19.         }
  20.         
  21.         .contenedor { 
  22.         }
  23.         
  24.         .azul {
  25.             width: 100%;
  26.             margin-left: -210px;    
  27.             background-color: blue;
  28.         }
  29.         
  30.         .sub_contenedor {
  31.             width: 100%;
  32.             margin-left: -210px;
  33.         }
  34.         
  35.         .gris {
  36.             background-color: gray;
  37.             width: 100%;
  38.             float: left;
  39.             margin-left: -323px;
  40.         }
  41.         
  42.         .verde {
  43.             background: green;
  44.             width: 315px;
  45.             float: right;
  46.         }       
  47.         
  48.  
  49.     </style>
  50.   </head>
  51.   <body>
  52.     
  53. <div class="contenedor-grande">
  54.  
  55.     <div class="rojo">
  56.         <p>&nbsp;</p>
  57.         <p>&nbsp;</p>
  58.         <p>&nbsp;</p>
  59.         <p>&nbsp;</p>
  60.         <p>&nbsp;</p>
  61.         <p>&nbsp;</p>
  62.         <p>&nbsp;</p>
  63.         <p>&nbsp;</p>
  64.         <p>&nbsp;</p>
  65.         <p>&nbsp;</p>
  66.         <p>&nbsp;</p>
  67.         <p>&nbsp;</p>
  68.         <p>&nbsp;</p>
  69.     </div> 
  70.     
  71.  
  72.     <div class="contenedor">
  73.      
  74.             
  75.         <div class="azul">
  76.             <p>&nbsp;</p>
  77.             <p>&nbsp;</p>
  78.             <p>&nbsp;</p>
  79.         </div>
  80.         
  81.         
  82.         <div class="sub_contenedor">
  83.             
  84.             <div class="gris">
  85.                 <p>&nbsp;</p>
  86.                 <p>&nbsp;</p>
  87.                 <p>&nbsp;</p>
  88.                 <p>&nbsp;</p>
  89.                 <p>&nbsp;</p>
  90.                 <p>&nbsp;</p>
  91.                 <p>&nbsp;</p>
  92.                 <p>&nbsp;</p>
  93.                 <p>&nbsp;</p>
  94.             </div>
  95.     
  96.             <div class="verde">
  97.                 <p>&nbsp;</p>
  98.                 <p>&nbsp;</p>
  99.                 <p>&nbsp;</p>
  100.                 <p>&nbsp;</p>
  101.                 <p>&nbsp;</p>
  102.                 <p>&nbsp;</p>
  103.                 <p>&nbsp;</p>
  104.                 <p>&nbsp;</p>
  105.                 <p>&nbsp;</p>
  106.             </div>
  107.             
  108.         </div>
  109.         
  110.         
  111.     </div>   
  112.  
  113.  
  114. </div>
  115.     
  116.   </body>
  117. </html>
__________________
Mis webs:
- Programador Web Autónomo
- Conciertos en Sevilla