El 28/04/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> escribió:
> Hola amigos: estuve buscando sobre como alinear dos cajs (divs) de forma
> horizontal una al lado de la otra y a la misma altura, consegui un articulo
> en desarrollo web.com y sin embargo no se soluciono:
> adjunto el codigo:
>
> CSS:
> html, body{width:100%;
> height:auto;
> margin: 0;
> padding: 0;}
>
> body{background-color:#000000;
> color:#FFFFFF;
> text-align:center;
> font-size:62.5%;
> font-family:Arial, Helvetica, sans-serif;}
>
> #contenedor{width:800px;
> margin:auto;
> text-align:center;}
>
> h1{font-size: 2.5em}
>
> #div1{float:left;
> width:310px;
> height:160px;}
>
> p{font-size:18px;}
>
> #div2{float:right;
> width:440px;
> height:160px;
> font-family:Georgia, "Times New Roman", Times, serif;}
>
> #linea{width:800px;
> height:12px;
> position:relative;
> background-image:url(grilla2.jpg);
> background-repeat:index-x;
> float:left;}
>
> #cuerpo{width:50%;
> height:auto;
> background-color:#ffffff;
> color:#000000;
> margin-right: 20%;
> float:left;
> }
>
> #menu{width:40%;
> height:auto;
> position:relative;
> float:right;}
>
> #contacto{width:40%;
> height:auto;
> float:right;}
>
> #blanco{clear:both;
> height:20px;}
>
> esta es la forma que quiero conseguir, se que no es dificil, pero creo que
> me "marie" un poco:
>
> http://www.desarrolloweb.com/articulos/ejemplos/css/dos-columnas-cabecera-pie-reves.html
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
No se a los demás, pero si no pones el fragmento HTML sobre el que
trabaja este CSS ...
O es que yo estoy 'empanao'
De todas maneras ...
Existen dos formas (que yo sepa)
1-tratarlos como celdas (display: table-cell;) de una tabla (display:
table;). Alineandolas verticalmente por sus lados superiores
(vertical-align: top;).
2-tratarlos como una columna que flota (float: right;), en este caso a
la derecha, al lado del cuerpo estático.
Esta segunda forma requiere un par de datos mas .... para evitar que se solapen
1-la columna flotante tiene que decir cual es su ancho. (width: ···;)
2-el cuerpo estático tiene que separarse en consecuencia (margin-right: ···;)
Hasta aquí la explicación.
La practica ...
++++ CSS (1)++++
#contenedor {display: table;}
.estatico, .columna {display: table-cell; vertical-align: top}
++++ HTML (1)++++
<div id="contenedor">
<div class="estatico">cUaLqUiEr cOsA</div>
<div class="columna">MuChO tExTo</div>
</div>
++++
NOTA: 'estatico' se sit'ua antes de 'columna', siguiendo el orden de
las celdas en una tabla.
++++ CSS (2)++++
#contenedor {width: 100%;}
.estatico {margin-right: 20%;}
.columna {float: right; width: 18%;}
++++ HTML (2)++++
<div id="contenedor">
<div class="columna">MuChO tExTo</div>
<div class="estatico">cUaLqUiEr cOsA</div>
</div>
++++
NOTA: en este caso, 'columna' se sitúa antes de 'estatico'. La razón
es que, al hacerla flotar, la quitamos del orden normal y el siguiente
bloque no la tiene en cuenta.
NOTA 2: el ancho de la 'columna' es menor que el margen del bloque
'estatico' para mantenerlos separados.
NOTA MUY IMPORTANTE : Si no te he liado mas .. esta parrafada vale un
café ... :-)
--
----o---( )---o----
Saludos de Victor Lopez Sabio
[EMAIL PROTECTED]
--------oooo--------
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
