Tema: Llenar espacio horizontal con una div de tamaño fijo y una variable
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 03/08/2011, 08:57
francap
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 107
Antigüedad: 14 años, 3 meses
Puntos: 3
Respuesta: Llenar espacio horizontal con una div de tamaño fijo y una variable
Bueno al final lo resolví usando tamaño fijo en width para ie7 y tamaño fijo y posición absoluta para ie6. No se si es lo mejor pero después de romperme un rato largo la cabeza y leer algunos tutoriales, fue lo mejor que pude hacer.

También de casualidad me encontré con la forma de eliminar la tabla que había usado para centrar el contenido de la página.

Dejo los códigos por si ayudan a alguien:
Código HTML: 
Ver original
  1. <?php
  2. include_once("includes.php");
  3. $configSite= new SiteConfig();
  4.  
  5.  
  6. ?>
  7. <!DOCTYPE html>
  8. <!--[if lt IE 7 ]><html lang='es' class='ie6'><![endif]-->
  9. <!--[if IE 7 ]> <html lang='es' class='ie7'> <![endif]-->
  10. <!--[if IE 8 ]> <html lang='es' class='ie8'> <![endif]-->
  11. <!--[if IE 9 ]> <html lang='es' class='ie9'> <![endif]-->
  12. <!--[if (gt IE 9)|!(IE)]> <!--> <html lang='es'><!--<![endif]-->
  13.  
  14. <!--head---------------------------------------------------------------------------------------------------------------->
  15.  
  16. <head>
  17.  
  18.     <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
  19.     <title><?php $configSite->NombreSitio ?></title>
  20.     <meta name='description' content='<?php $configSite->Descripcion ?>'>
  21.  
  22.   
  23.   
  24.   
  25.     
  26.     <link href='template/css/template.css' type='text/css' rel='stylesheet' />
  27.     
  28.    
  29.         
  30. </head>
  31.     
  32.  <!--body-------------------------------------------------------------------------------------------------------------- -->
  33. <body>
  34.  
  35.  
  36. <div id="contenedor">
  37.  
  38.     <div id="encabezado">
  39.         <div id="logo">
  40.             <img src="template/img/lOGO.gif" width="224px" height="152px" >
  41.         </div> 
  42.             
  43.              <div id="head2">
  44.                 <div id="destacado1">
  45.     1234567890'qwertyuiopasdfghjklñzxcvbnm,.
  46.                 </div>  
  47.                 
  48.           
  49.                 
  50.                 <div id="Buscador">
  51.     
  52.                 </div>
  53.             
  54.                 <div id="destacado2">
  55.     
  56.                 </div>
  57.             </div>
  58.     
  59.     </div>
  60. </div>
  61.     
  62.     
  63.  
  64.  
  65.  
  66.  
  67.     
  68. </body>
  69.  
  70. </html>


y el css
Código CSS: 
Ver original
  1. /*div{
  2.     border-color:#000;
  3.     border-style:dashed;
  4.     border-left-width:1px;
  5.     }*/
  6.  
  7.  
  8.  
  9.  
  10.  
  11. #contenedor{
  12.     margin: 0 auto;
  13.     text-align:left;
  14.     width:90%;
  15.     height:900px;
  16. }
  17.  
  18. .ie6 , .ie7 #contenedor{
  19.     width:900px;    
  20. }
  21.  
  22. #encabezado{
  23.     
  24.     height:160px;
  25.     width:100%;
  26.  
  27. }
  28.  
  29. #logo{
  30.     float:left;
  31.     margin-left:0px;
  32.     margin-right:0px;
  33.     background-color:#FFF;
  34. }
  35.  
  36. #head2{
  37.     width:100%;
  38. }
  39.  
  40.  .ie7 #head2{
  41.     width:676px;
  42.  
  43. }
  44.  
  45.  .ie6 #head2{
  46.     width:650px; 
  47.     position:absolute;
  48.     left:285px;
  49.     top:35px;
  50.     
  51. }
  52.  
  53.  
  54.  
  55.  
  56. #destacado1{
  57.     width:100%;
  58.     height:37px;
  59.     background-color:#f99d02;
  60.     margin-bottom:3px;
  61. }
  62.  
  63. #Buscador{
  64.     width:100%;
  65.     height:44px;
  66.     background-color:#cacace;
  67. }
  68.  
  69. #destacado2{
  70.     margin-top:3px;
  71.     width:100%;
  72.     height:24px;
  73.     background-image:url(../img/back_destacado2.jpg);
  74.     
  75. }


Encontré tambien que se puede usar para cenrar:
display:tabla en el contenedor y display:cell en el contenido para poder usar el atributo align y centrar así cuando se complica.. Es una buena práctica o sigo buscando?

Gracias