CSS - Ayudenme a posicionar unas cajas en css

Ayudenme a posicionar unas cajas en css

Publicado por Pablo (2 intervenciones) el 23/10/2011 03:28:12

Buenas, quisiera saber si es posible realizar el siguiente posicionamiento de cajas en css, utilizando solo el float left(evitar el right para no tener que dar muchas coordenadas):

---------- --------------------------------------
| | | |
| | | |
---------- | |
---------- | |
| | | |
| | | |
---------- | |
| |
---------------------------------------

Como ven 2 cajas pertenecen a un menu en la parte izquierda, mientras que el contenido está en la parte derecha central.
Cualquier ayuda será agradecida.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

0

Responder

Ayudenme a posicionar unas cajas en css

Publicado por Pablo (2 intervenciones) el 23/10/2011 03:34:05

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

0

Comentar

Pos: 2

Val: 624

Ayudenme a posicionar unas cajas en css

Publicado por xve (490 intervenciones) el 23/10/2011 09:16:39

Hola Pablo, tienes un icono para insertar código y que no se descuadre...

Bien, la manera con que yo lo aria, seria con 4 divs, y cada uno con una anchura fija, y todos con float left... algo así:

1

2

3

4

.primero {clear:both;width:50px;float:left;border:0 1px;}

.segundo {width:50px;float:left;border-right:1px;}

.segundo {width:100px;float:left;border-right:1px;}

.segundo {width:50px;float:left;border-right:1px;}

NO lo he probado, pero mas o menos... espero que te sirva.

Coméntanos ok?

Valora esta respuesta

0

Comentar

Ayudenme a posicionar unas cajas en css

Publicado por DerangexMX (39 intervenciones) el 29/10/2011 23:58:39

Para que funcione como lo quieres, coloca 4 divs dentro de un div contenedor con el ancho que corresponda y controla las cajas por medio de 2 clases, ejemplo:

1

2

3

4

5

6

7

8

9

10

11

<style>

.contenedor {width:150px; float:left; background:#eee;}

.c1 {width:50px; float:left; margin:0; background:#ccc; display:block; text-align:center;}

.c2 {width:50px; float:left; margin:0 0 0 100px; background:#e1e1e1; display:block; text-align:center;}

</style>

<div class="contenedor">

	<div class="c1">uno</div>

	<div class="c2">dos</div>

	<div class="c2">tres</div>

	<div class="c1">cuatro</div>

</div>

Espero te sea de utilidad.

ssl | pki | certificado de seguridad | certificado digital | cfdi

Valora esta respuesta

0

Comentar