Ancho de un div ajustado a toda la página

larariro · #1 (**permalink**) 22/03/2006, 10:38

¡Hola!

Me veo incapaz de hacer una cosa que, en un principio, debería de ser muy fácil.

Soy incapaz de hacer que 3 divs aparezcan en la misma línea y que ocupen todo el ancho de la pantalla. El caso es que quiero tener una parte fija a la izquierda y otra a la derecha y que la del centro cambie de tamaño según el tamaño de la ventana del navegador. Esto me querría hacerlo sin poner tamaños fijos, ya que me gustaría poder modificar la parte de la izquierda de la manera más fácil posible. Como así me explico muy mal, podéis copiar y pegar el código que pongo abajo y en seguida entenderéis lo que quiero hacer y no me sale.

Código PHP:

  <html>

<head>

<style type="text/css" media="screen">

.izquierda {

    background-color: aaaaaa;

    float: left;

}

.centro {

    background-color: cccc55;

}

.derecha {

    background-color: ffaacc;

    float: right;

}

</style>

</head>

<body>

    <div class="izquierda">

        Izquierda

    </div>

    <div class="centro">

        Centro

    </div>

    <div class="derecha">

        Derecha

    </div>

</body>

</html>

¿Cómo puedo hacer para que me salga el div de la derecha en la misma fila que los otros dos?

Muchas gracias y un saludo.

kahlito · #2 (**permalink**) 23/03/2006, 01:44

Hola larariro, puedes hacerlo de varias formas, en tu caso por ejemplo así:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba</title>
<style type="text/css" media="screen">
.izquierda {
    background-color:#aaaaaa;
    float: left;
}
.centro {
    background-color: #cccc55;
    float:left;
	}
.derecha {
    background-color: #ffaacc;
    float: right;
}
</style>
</head>
<body>
    <div class="izquierda">
        Izquierda
    </div>
    <div class="centro">
        Centro
    </div>
    <div class="derecha">
        Derecha
    </div>
</body>
</html>

Solo tendrias que poner los anchos que desees a cada uno y listo

larariro · #3 (**permalink**) 23/03/2006, 05:04

Gracias por responder, kahlito

Con lo que me dices, los tres elementos salen en la misma línea, pero el del centro sale ajustado a su tamaño y no al ancho del navegador y eso es lo que necesito. No quiero darles tamaños fijos porque la página no lo tiene. Quiero que se adapte al navegador del usuario. Tampoco puedo darles tamaño por porcentaje, porque no sé lo que me ocupa cada parte y si cambiase la ventana del navegador, cambiarían los tres elementos no sólo el del centro.

Para que sepáis exactamente lo que quiero, he hecho el mismo ejemplo con tablas. En él, sale una celda a la izquierda y otra a la derecha cuyos valores cambian con el contenido de la celda. La central ocupa todo el ancho restante y, si cambio el ancho de la pantalla, ésta es la única que se modifica.

Lo que me gustaría es poder pasar esta tabla a CSS.

Código PHP:

  <html>

<head>

</head>

<body>

    <table width="100%">

        <tr>

            <td bgcolor="#CCCCCC">

                Izquierda

            </td>

            <td bgcolor="#FFFF00" width="100%">

                Centro

            </td>

            <td bgcolor="#66FFCC">

                Derecha

            </td>

        </tr>

    </table>

</body>

</html>

Muchas gracias y un saludo.

SiR.CARAJ0DIDA · #4 (**permalink**) 23/03/2006, 06:30

todo lo que flota debe tener un ancho fijo y siempre van primero las capas flotantes.

Código:

<html>
<head>
<style type="text/css" media="screen">
.izquierda {
    background-color: #aaa;
    float: left;
    width:200px;
}
.centro {
    background-color: #cccc55;
    margin-left:200px;
    margin-right:200px;
}
.derecha {
    background-color: ffaacc;
    float: right;
    width:200px;
}
</style>
</head>
<body>
    <div class="izquierda">
        Izquierda
    </div>
    <div class="derecha">
        Derecha
    </div>
    <div class="centro">
        Centro
    </div>
</body>
</html>

larariro · #5 (**permalink**) 23/03/2006, 10:58

Muchas gracias por la respuesta.

"todo lo que flota debe tener un ancho fijo"

Vaya, pues no lo sabía. ¿Se puede hacer sin "flotar"? Es que lo que va en realidad en la parte izquierda es un menú al que me gustaría poder añadir opciones cuando quiera sin tener que calcular el nuevo ancho ni el de los elementos que tenga al lado...

Gracias y un saludo.

atoleon · #6 (**permalink**) 03/12/2007, 12:43

Creo que no se puede hacer. para que algo cambie de forma dinámica debe tener margenes equivalente a los flotantes de sus lados. y si los flotantes no tienen ancho pues no se puede poner margen.
No se si habrá alguna manera de hacerlo en javascript.