maquetación con div´s

[martin2011]

Buenas,
Es la primera vez que escribo en este foro pidiendo ayuda ya que estoy haciendo mi primera web.
La duda es la siguiente:

Como puedo crear mediante div´s una caja dividida en dos partes, la parte izquierda la ocuparia completamente una imagen y la parte derecha (del mismo tamaño que la otra) tendría que estar dividida en cinco filas. Yo lo he intentado así, pero no funciona:

html:

<div id="contenedor">
<div id="izquierda"></div>
<div id="derecha">
<div id="fila"> 1 </div>
<div id="fila"> 2 </div>
<div id="fila"> 3 </div>
<div id="fila"> 4 </div>
</div>
</div>

css:

contenedor { width: 200px; height: 100px}

izquierda { width: 50%; float:left}

derecha { width: 50%; float:right}

fila {width: 100%; float:right}


Supongo que es algo muy evidente pero no lo consigo, agradecería mucho cualquier ayuda.

Muchas gracias

[pzin]

Las reglas de tus CSS están todas bien. De hecho lo único que no hace falta es ese flotado a la derecha en la clase .fila.

Lo que está mal, son tus selectores.

Código CSS:

#contenedor { width: 200px; height: 100px}
 
#izquierda { width: 50%; float:left}
 
#derecha { width: 50%; float:right}
 
.fila {width: 100%;}
 

Adicionalmente fila tiene que ser una clase, y no un ID, ya que estos últimos sólo puede darse una sola vez en el documento.

Nunca está de más empezar por lo básico: http://librosweb.es/css/capitulo_2/s...ector_de_clase

[martin2011]

muchas gracias me has sido de mucha utilidad, y el link es increible.

muchas gracias otra vez

[rjulio21]

otra opcion para lo de las 5 columnas es que uses la propiedad multi columnas de css3

Código CSS:

div{
-moz-column-count:5; /* Firefox */
-webkit-column-count:5; /* Safari and Chrome */
column-count:5;
}
 

De ese modo no tienes que definir mas nada.