Ancho variable de 1 de 3 columnas

sjam7 · #1 (**permalink**) 05/03/2007, 23:27

Hola, tengo un popup que tiene un encabezado que es la unión de 3 imágenes, 2 de ellas de tamaño fijo y la otra se expande el color de fondo y se pone una imagen con ese mismo fondo para dar la impresion de que se expande, algo asi:

-------------------------------
| 70px | variable | 70px |
-------------------------------

Espero se entienda lo que necesito, actualmente lo tengo con la columna de enmedio fija pero quisiera que se pudiera expandir, ahora tengo esto:

Código:

<div style="background-color: #58595B">
    <div style="float:left; background-image:url(images/fndTOPizq.gif); width:177px; height:86px"><img src="images/fndNOTICIAS.gif" alt="NOTICIAS" style="padding:5px 0 0 20px"></div>
    <div style="float:left; background-color: #58595B; height:86px; width:96px; text-align:center;"><img src="images/LOGOfnd.gif" alt="Suntory"></div>
    <div style="float:right; background-image:url(images/fndTOPder.gif); width:177px; height:86px; text-align:right;"><img src="images/fndLOGO.gif" alt="BuenProvecho" style="padding-right:20px"></div>
</div>

Espero se entienda y me puedan ayudar, de antemano gracias

Mikmoro · #2 (**permalink**) 06/03/2007, 03:59

Mira a ver si te sirve este código. Básicamente se trata de quitar el width y el float left a la columna central, y alguna cosilla más:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>sjam7</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
#der {float: right;
background-image: url(images/fndTOPder.gif);
width: 177px;
height: 86px;
text-align: right;
}
#izq {float: left;
background-image: url(images/fndTOPizq.gif);
width: 177px;
height: 86px;
}
#cen { background-color: rgb(88, 89, 91);
height: 86px;
text-align: center;
margin: 0px 177px 0px;
}
  </style>
</head>
<body>
<div style="background-color: rgb(88, 89, 91);">
<div id="der"><img src="images/fndLOGO.gif"
 alt="BuenProvecho" style="padding-right: 20px;"></div>
<div id="izq"><img src="images/fndNOTICIAS.gif"
 alt="NOTICIAS" style="padding: 5px 0pt 0pt 20px;"></div>
<div id="cen"><img src="images/LOGOfnd.gif"
 alt="Suntory"></div>
</div>
</body>
</html>

Ya comentarás.

Mikel.

sjam7 · #3 (**permalink**) 06/03/2007, 13:19

bueno, pues no funco, lo puedes ver en www.buenprovecho.ws/suntory/noticias.asp

la del centro se abre a toda la pagina y manda para abajo a la de la derecha (columnas)

sjam7 · #4 (**permalink**) 06/03/2007, 13:23

perdon, ya quedo, tenia puestos los divs en el orden que para mi era logico: izquierda-centro-derecha pero las puse en el orden que tu las pusiste y funciono, muchas gracias, solo una pregunta, sabes por que pasa esto ultimo? del orden en que se deben poner?

Mikmoro · #5 (**permalink**) 06/03/2007, 15:32

Veamos:
como vés, el truco está en que las dos columnas de los lados tengan un ancho definido y estén flotadas, y la del centro no. Una columna que no está flotada, si no tiene un ancho definido ocupa todo el ancho de la línea en la que está, y no permite que otras se pongan a su lado, obligando a éstas a saltar a la siguiente línea.

De esa manera, si ponemos izquierda--centro--derecha, tenemos que la izquierda aparece en la primera línea, la del centro ocupa todo el resto de espacio disponible en su línea, y como no está flotada, obliga a que la de la derecha baje a la siguiente línea (en horizontal).

¿Cómo se arregla esto? Muy sencillo: colocamos la columna de la derecha (flotada), después la de la izquierda (también flotada) que se coloca en la misma línea, y después la del centro, que como las otras dos están flotadas le permiten colocarse en la misma línea que ellas, y al no estar flotada ni tener ancho definido, ocupa todo el espacio que queda disponible.

Lógico y sencillo, ¿no?

Espero haberme explicado bien.

Mikel.

sjam7 · #6 (**permalink**) 08/03/2007, 19:36

excelente tanto la solucion como la explicacion, muchas gracias