Problema con divs centrales.

Citar

Escrito el 04 May 2011 03:11 pm

Poco a poco voy avanzando, el que persevera triunfa, dicen.

Creé un div general (el que contendrá toda la página), le puse Width y Heigth al 100%, para que agarre todo el ancho de la página.

Dentro puse el div header, el cual tiene un heigth de 150px y un width en 100%.

Dentro del header puse el div logo, el div logo tiene un height de 100px y un width de 200px, aparte de estar con el float:left.

Al costado, y dentro de header también, puse el div figura. Figura tiene también un height de 100px y un width de 200px, la diferencia es que tiene un float en right.

En donde tengo problemas es en el div de en medio.

Deseo que haya un div en medio de ambos (entre logo y figura) que sea justamente el que cambie de tamaño cuando el monitor lo haga.

Intenté ponerle en width en auto pero con margin-right 200px y nada, intenté ponerle simplemente en auto pero hace que desaparesca el div figura, intenté de todo, y simplemente no logro encajar ese bendito div medio para que se modifique en tamaño pero siempre estando entre logo y figura.

¿QUÉ HAGO?

Por DMVA

Claber

101 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Desarrollador Multimedia

Citar

Escrito el 04 May 2011 04:39 pm

Tú lo que quieres es esto:

Código HTML :

<!doctype html>
<html>
<head>
<style type="text/css">
#header {
   display: block;
   height: 150px;
   width: 100%;
   vertical-align: top;
   text-align: center;
   background-color: red;
   min-width: 1170px;
}
#fila-header {
   display: table-row;
}
#logo {
   display: inline-block;
   height: 100px;
   width: 200px;
   background-color: green;
   float: left;
}
#medio {
   display: inline-block;
   height: 100px;
   width: 65%;
   min-width: 760px;
   background-color: blue;
}
#figura {
   display: inline-block;
   height: 100px;
   width: 200px;
   background-color: yellow;
   float: right;
}
</style>
</head>
<body>
<div style="background-color: #ccc;">
   <div id="header">
         <div id="logo">
         </div>
         <div id="medio">
         </div>
         <div id="figura">
         </div>
   </div>
   <div id="contenido">
      <p>Algún contenido aquí</p>
   </div>
</div>
</body>
</html>

Está configurado para una pantalla de 1280 de ancho. Esto lo puedes cambiar modificando el "width" del div "medio" y el "min-width" de "header".

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Problema con divs centrales.

Escribe una respuesta rapida