Hola, esta es mi primera colaboración... espero resulte útil ;-)
1- He dividido los div id en top, middle y footer con un width de 100%
2- El div class left y right tienen un width de 25% y un float left con
margin 0
3- El div class center tiene un width de 50%
4- Para centrar un acho fijo en el center, le he añadido un class con un
ancho de 400px
Aqui va el ejemplo:
<html>
<head>
<style>
* {margin: 0 auto;}
body {text-align: center;}
#top, #middle, #footer {width:100%; clear: both; margin: 20px auto;
overflow: hidden; display: block;}
.left {background: #ccc; color:#000; width: 25%; float: left;
display:inline; }
.center {background: #000; color:#fff; width: 50%; float: left;
display:inline; }
.right {background: #ccc; color:#000; width: 25%; float: right;
display:inline;}
.fix-center {width: 400px; background: #ccc; color:#000;}
</style>
</head>
<body>
<!-- top -->
<div id="top">
<div class="left"><h1>top left</h1></div>
<div class="center"><h1 class="fix-center">top center</h1></div>
<div class="right"><h1>top right</h1></div>
</div>
<!-- middle -->
<div id="middle">
<div class="left"><h1>middle left</h1></div>
<div class="center"><h1 class="fix-center">middle center</h1></div>
<div class="right"><h1>middle right</h1></div>
</div>
<!-- footer -->
<div id="footer">
<div class="left"><h1>footer left</h1></div>
<div class="center"><h1 class="fix-center">footer center</h1></div>
<div class="right"><h1>footer right</h1></div>
</div>
</body>
</html>
Salu2,
Eloi E.
El 25 de marzo de 2010 18:57, pablo monticano
<pablowebdes...@gmail.com>escribió:
> Aqui hay una manera:
> Crea 3 divs que contengan a los restantes. el div left contiene a
> left_top, left_middle y left_footer y asi para los center y los right.
> Los hubicas flotados con las medidas como quieras y no le das altura.
> Le das anchos en porcentajes, em o px para que te queden hubicados.
> Ejemplo el div left mide 33% y tiene float left, el center mide lo
> mismo y tiene el mismo flotado y el right igual.
> A los div que van dentro les metes un class para no sumar codigo que
> sea redundante en cuanto a su ancho, padding, su hubicacion, etc.
> O sea una pagina a tres columnas. Donde ellas son las que dan las
> medidas "fijas" de anchos entonces asi podes hubicar en la columna del
> centro que esta centrada con respecto a la de la izquierda, previo
> flotado.
> Al hacer zoom+ , varia todo parejo.
>
>
> El 25/03/10, Ariel <isaacr...@gmail.com> escribió:
> > Sí pero el único ancho que va a estar fijo es el de los div con la
> etiqueta
> > center, los demas pueden variar de tamaño y no quiero que me afecten la
> > posicion central de los div del centro.
> > Con los elementos flotantes se puede resolver de todas formas ???
> > Saludos
> >
> > 2010/3/25 chuchurex <chuchu...@gmail.com>
> >
> >> Hola
> >>
> >> Flotando los 3 a la izquierda y fijando los anchos lo puedes lograr, no
> se
> >> si esto resuleve tu duda. Además le das un overflow hidden al div que
> >> contenga cada la cabecera, medio y pie de página.
> >>
> >> saludos
> >> chuchurex
> >>
> >> El 25 de marzo de 2010 11:27, Ariel <isaacr...@gmail.com> escribió:
> >>
> >> > Hola soy relativamente nuevo en css, me gustarian que me dijeran como
> >> > harian
> >> > ustedes para centrar un div que esta entre dos necesito que siempre se
> >> vea
> >> > en el centro horizontalmente, pero que tambien esten en el centro los
> >> > del
> >> > medio y los del pie de pagina
> >> > Lo que tengo es esto:
> >> >
> >> > <div id="left_top"></div
> >> > <div id="center_top"></div
> >> > <div id="right_top"></div
> >> >
> >> > <div id="left_middle"></div
> >> > <div id="center_middle"></div
> >> > <div id="right_middle"></div
> >> >
> >> > <div id="left_footer"></div
> >> > <div id="center_footer"></div
> >> > <div id="right_footer"></div>
> >> >
> >> > Necesito que todos los que digan center se vean en el centro
> >> > horizontalmente, bien alineados con los que estan en el medio y en el
> >> > pie
> >> > de
> >> > pagina.
> >> > Que creen ustedes como lo harian ???
> >> > Gracias de antemano.
> >> > Ariel
> >> > _______________________________________________
> >> > Lista de distribución Ovillo
> >> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> >> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> >> > http://lists.ovillo.org/mailman/listinfo/ovillo
> >> >
> >> _______________________________________________
> >> Lista de distribución Ovillo
> >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> >> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> >> http://lists.ovillo.org/mailman/listinfo/ovillo
> >>
> > _______________________________________________
> > Lista de distribución Ovillo
> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> > http://lists.ovillo.org/mailman/listinfo/ovillo
> >
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
--
Salu2,
Eloi
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
