Llenar espacio horizontal con una div de tamaño fijo y una variable

francap · #1 (**permalink**) 02/08/2011, 15:36

Hola, como dice el títuo tengo en mi encabezado el logo dentro de una div flotado a la izquierda y quiero poner a la derecha del logo otra sección, que ocupe el resto del espacio que queda libre en sentido horizontal.

Pude resolverlo para ff y chrome de la siguiente manera, pero en ie no funca.

Código HTML:

Ver original<div id="encabezado">
        <div id="logo">
            <img src="template/img/lOGO.gif" width="224px" height="152px" >
        </div> 
            
             <div id="head2">
                <div id="destacado1">
    
                </div>  
                
                <div class="separador"></div>  
                
                <div id="Buscador">
    
                </div>
                <div class="separador"></div> 
                <div id="destacado2">
    
                </div>
            </div>
    
    </div>

Las dos div de las que hablo anteriormente son logo y head2. Luego head dos tiene contenido en 3 divs

Código CSS:

Ver original#contenedor{
    text-align:left;
    width:90%;
    height:900px;
    
 
 
}
 
#encabezado{
    height:160px;
    width:100%;
 
}
 
#logo{
    float:left;
    margin-left:0px;
    margin-right:0px;
    background-color:#FFF;
    
}
 
#head2{
    margin-top:10px;
    width:100%;
    height:109px;
}
.separador{
    background-color:transparent;
    height:2px;
}
#destacado1{
    width:100%;
    height:37px;
    background-color:#f99d02;
}
 
#Buscador{
    width:100%;
    height:44px;
    background-color:#cacace;
}
 
#destacado2{
    width:100%;
    height:24px;
    background-image:url(../img/back_destacado2.jpg);
    
}

Desde ya muchas gracias por su tiempo.

andresdzphp · #2 (**permalink**) 02/08/2011, 17:58

Lo que pasa es que Internet Explorer no es adivino y necesita de un DOCTYPE. Así funciona perfectamente en IE 9.

Código CSS:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
 
<style type="text/css">
 
    #contenedor{
        text-align:left;
        width:90%;
        height:900px;
    }
 
    #encabezado{
        height:160px;
        width:100%;
 
    }
 
    #logo{
        float:left;
        margin-left:0px;
        margin-right:0px;
        background-color:#FFF;
 
    }
 
    #head2{
        margin-top:10px;
        width:100%;
        height:109px;
    }
    .separador{
        background-color:transparent;
        height:2px;
    }
    #destacado1{
        width:100%;
        height:37px;
        background-color:#f99d02;
    }
 
    #Buscador{
        width:100%;
        height:44px;
        background-color:#cacace;
    }
 
    #destacado2{
        width:100%;
        height:24px;
        background-image:url(../img/back_destacado2.jpg);
 
    }
 
</style>
 
</head>
<body>
<div id="encabezado">
    <div id="logo">
        <img src="template/img/lOGO.gif" width="224px" height="152px" >
    </div> 
 
    <div id="head2">
        <div id="destacado1">
 
        </div>  
 
        <div class="separador"></div>  
 
        <div id="Buscador">
 
        </div>
        <div class="separador"></div> 
        <div id="destacado2">
 
        </div>
    </div>
 
</div>
    
    
</body>
</html>

francap · #3 (**permalink**) 02/08/2011, 20:07

Ya había puesto el DOCTYPE no lo puse aquí en el ejemplo.

El codigo completo es

Código HTML:

Ver original<?php
include_once("includes.php");
$configSite= new SiteConfig();
 
 
?>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html lang='es' class='ie6'><![endif]-->
<!--[if IE 7 ]> <html lang='es' class='ie7'> <![endif]-->
<!--[if IE 8 ]> <html lang='es' class='ie8'> <![endif]-->
<!--[if IE 9 ]> <html lang='es' class='ie9'> <![endif]-->
<!--[if (gt IE 9)|!(IE)]> <!--> <html lang='es'><!--<![endif]-->
 
<!--head---------------------------------------------------------------------------------------------------------------->
 
<head>
 
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    <title><?php $configSite->NombreSitio ?></title>
    <meta name='description' content='<?php $configSite->Descripcion ?>'>
 
  
    
    <link href='template/css/template.css' type='text/css' rel='stylesheet' />
    
   
        
</head>
    
 <!--body-------------------------------------------------------------------------------------------------------------- -->
<body>
 
<table width="100%"  align="center">
<tr> <td align="center">
<div id="contenedor">
 
    <div id="encabezado">
        <div id="logo">
            <img src="template/img/lOGO.gif" width="224px" height="152px" >
        </div> 
            
             <div id="head2">
                <div id="destacado1">
    
                </div>  
                
                <div class="separador"></div>  
                
                <div id="Buscador">
    
                </div>
                <div class="separador"></div> 
                <div id="destacado2">
    
                </div>
            </div>
    
    </div>
</div>
    
    
 
 
 
 
</td></tr></table>
</body>
 
</html>

No funciona en ie8 o inferior... si funciona en chrome y firefox.

Estoy tratando de empezar a maquetar en css. Como podrán ver en el código ya tuve que usar una tabla para centrar el contendido de la pagina. Quiero que mi web se vea en la mayor cantidad de versiones de ie posible ademas de FF y chrome. Les parece correcto maquetar con css o en mi caso será mejor volver a usar tablas?

andresdzphp · #4 (**permalink**) 02/08/2011, 20:39

Cita:

Iniciado por francap

Estoy tratando de empezar a maquetar en css. Como podrán ver en el código ya tuve que usar una tabla para centrar el contendido de la pagina. Quiero que mi web se vea en la mayor cantidad de versiones de ie posible ademas de FF y chrome. Les parece correcto maquetar con css o en mi caso será mejor volver a usar tablas?

Ya no se usan las tablas para maquetar diseños. Probando con BrowserLab funciona en IE 8 y 9 pero no en 6 y 7. Si consigo algo te aviso. Funciona con todos los Chrome Firefox y Safari

francap · #5 (**permalink**) 03/08/2011, 04:27

Te agradezco tu tiempo Andrés. Seguramente sea por mi inexperiencia... pero lo veo un poco más complicado que usar tablas, en las cosas más finas.

francap · #6 (**permalink**) 03/08/2011, 08:57

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<?php
include_once("includes.php");
$configSite= new SiteConfig();
 
 
?>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html lang='es' class='ie6'><![endif]-->
<!--[if IE 7 ]> <html lang='es' class='ie7'> <![endif]-->
<!--[if IE 8 ]> <html lang='es' class='ie8'> <![endif]-->
<!--[if IE 9 ]> <html lang='es' class='ie9'> <![endif]-->
<!--[if (gt IE 9)|!(IE)]> <!--> <html lang='es'><!--<![endif]-->
 
<!--head---------------------------------------------------------------------------------------------------------------->
 
<head>
 
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    <title><?php $configSite->NombreSitio ?></title>
    <meta name='description' content='<?php $configSite->Descripcion ?>'>
 
  
  
  
    
    <link href='template/css/template.css' type='text/css' rel='stylesheet' />
    
   
        
</head>
    
 <!--body-------------------------------------------------------------------------------------------------------------- -->
<body>
 
 
<div id="contenedor">
 
    <div id="encabezado">
        <div id="logo">
            <img src="template/img/lOGO.gif" width="224px" height="152px" >
        </div> 
            
             <div id="head2">
                <div id="destacado1">
    1234567890'qwertyuiopasdfghjklñzxcvbnm,.
                </div>  
                
          
                
                <div id="Buscador">
    
                </div>
            
                <div id="destacado2">
    
                </div>
            </div>
    
    </div>
</div>
    
    
 
 
 
 
    
</body>
 
</html>

y el css

Código CSS:

Ver original/*div{
    border-color:#000;
    border-style:dashed;
    border-left-width:1px;
    }*/
 
 
 
 
 
#contenedor{
    margin: 0 auto;
    text-align:left;
    width:90%;
    height:900px;
}
 
.ie6 , .ie7 #contenedor{
    width:900px;    
}
 
#encabezado{
    
    height:160px;
    width:100%;
 
}
 
#logo{
    float:left;
    margin-left:0px;
    margin-right:0px;
    background-color:#FFF;
}
 
#head2{
    width:100%;
}
 
 .ie7 #head2{
    width:676px;
 
}
 
 .ie6 #head2{
    width:650px; 
    position:absolute;
    left:285px;
    top:35px;
    
}
 
 
 
 
#destacado1{
    width:100%;
    height:37px;
    background-color:#f99d02;
    margin-bottom:3px;
}
 
#Buscador{
    width:100%;
    height:44px;
    background-color:#cacace;
}
 
#destacado2{
    margin-top:3px;
    width:100%;
    height:24px;
    background-image:url(../img/back_destacado2.jpg);
    
}

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