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:#00;
color:#FF;
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:#ff;
color:#00;
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 Ovillo@lists.ovillo.org
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=estaticocUaLqUiEr cOsA/div
div class=columnaMuChO 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=columnaMuChO tExTo/div
div class=estaticocUaLqUiEr 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]
___
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
