Gracias caricatos, creo que lo voy consiguiendo, ahora tengo un pequeño problemilla a solucionar, me explico.
He conseguido la estructura que hay en la imagen sin problemas, como decía, son 4 bloques exactamente iguales a ese, el primero ya lo tengo, coloco el segundo y todo correcto salvo una cosita, el titulo Bloque Informativo 2 (en este caso) la etiqueta Activado y el Checkbox se me quedan dentro del primer bloque, justamente debado de la etiqueta activado y el checkbox del primer bloque, no me salta de línea como es mi intención.
Igual esto ya es un problema más de CSS que me dicen?
Este es el XHTML
Código:
<label for="titulo">Título</label><br /><br /><input id="titulo" name="titulo" type="text" /><br /><br />
<label for="descripcion">Descripción</label><br /><br /><textarea id="descripcion" name="descripcion"></textarea><br /><br />
<label for="bloque1">Bloque Informativo 1</label><br /><br />
<div id="img_bloque1"><a href="#">Insertar Imagen</a><img src="#" /></div><textarea id="descripcion_bloque1" name="descripcion_bloque1"></textarea><label for="activar_bloque1">Activado <input id="activado1" name="activado1" type="checkbox" /></label>
<label for="bloque2">Bloque Informativo 2</label><br /><br />
<div id="img_bloque2"><a href="#">Insertar Imagen</a><img src="#" /></div><textarea id="descripcion_bloque2" name="descripcion_bloque2"></textarea><label for="activar_bloque2">Activado <input id="activado2" name="activado2" type="checkbox" /></label>
</fieldset>
y este el CSS
Código:
/* ESTILOS PARA EL BLOQUE INFORMATIVO 1 */
div#bloque1 {
width:900px;
height:105px;
}
textarea#descripcion_bloque1 {
margin-right:5px;
float:left;
}
div#img_bloque1 {
border:1px #CCC solid;
width:115px;
height:105px;
text-align:center;
position:relative;
padding-top:52;
float:left;
margin-right:5px;
}
div#img_bloque1 a {
position:absolute;
top:45px;
right:12px;
}
/* ESTILOS PARA EL BLOQUE INFORMATIVO 1 */
/* ESTILOS PARA EL BLOQUE INFORMATIVO 2 */
textarea#descripcion_bloque2 {
margin-right:5px;
float:left;
}
div#img_bloque2 {
border:1px #CCC solid;
width:115px;
height:105px;
text-align:center;
position:relative;
padding-top:52;
float:left;
margin-right:5px;
}
div#img_bloque2 a {
position:absolute;
top:45px;
right:12px;
}
/* ESTILOS PARA EL BLOQUE INFORMATIVO 2 */
el div#bloque1 ya no existe :)