Foros del Web » Creando para Internet » CSS »

Ancho de un div ajustado a toda la página

Estas en el tema de Ancho de un div ajustado a toda la página en el foro de CSS en Foros del Web. ¡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 ...
  #1 (permalink)  
Antiguo 22/03/2006, 10:38
 
Fecha de Ingreso: agosto-2004
Mensajes: 51
Antigüedad: 13 años, 3 meses
Puntos: 0
Ancho de un div ajustado a toda la página

¡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-coloraaaaaa;
    
floatleft;
}
.
centro {
    
background-colorcccc55;
}
.
derecha {
    
background-colorffaacc;
    
floatright;
}
</
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.
  #2 (permalink)  
Antiguo 23/03/2006, 01:44
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #3 (permalink)  
Antiguo 23/03/2006, 05:04
 
Fecha de Ingreso: agosto-2004
Mensajes: 51
Antigüedad: 13 años, 3 meses
Puntos: 0
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.
  #4 (permalink)  
Antiguo 23/03/2006, 06:30
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
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>
__________________
Internet Explorer SuckS
Download FireFox
  #5 (permalink)  
Antiguo 23/03/2006, 10:58
 
Fecha de Ingreso: agosto-2004
Mensajes: 51
Antigüedad: 13 años, 3 meses
Puntos: 0
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.
  #6 (permalink)  
Antiguo 03/12/2007, 12:43
Avatar de atoleon  
Fecha de Ingreso: marzo-2007
Mensajes: 156
Antigüedad: 10 años, 9 meses
Puntos: 1
Re: Ancho de un div ajustado a toda la página

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:34.