Cajas con css

Hola amigos tengo una pregunta es posible hacer una caja como la de la imagen abajo, todo con stylos css:



Alguién me podria ayudar con esto?

Saludos

si

en que parte te "atoraste"?
supongo que nociones basicas tendras no?
dinos que parte no te sale para ayudarte

Hola gracias por responder, si mira aca tengo ya algo de lo que tengo en mente:

http://www.surtrek.com/alta_galapagos.html



Pero igual tengo un problema como lo ves arriba en la imagen,

Ahora lo que quiere es hacer algo asi:



Puedes ayudarme a corregir el primer error y darme pistas de como hacer la 2da caja?

Saludos

incrustaste el texto en la caja de el "doble de hoja"?
el fondo supongo que separaste la parte que se ira expandiendo y la parte donde esta doblada la hoja no?

pero no se exactamente tu duda sobre las cajas de abajo, que es lo que te falla? por ahora supongo que seran las dos columnas

debes tener un contenedor y dos divs, al que llamaremos principal, que no tendra la gran importancia y el right que sera el que defina la division entre ambos

que quedarian algo asi

Código :

<div id="contenedor">

<div id="principal">
principal
</div>

<div id="right">
right
</div>

</div>

y el codigo css (la parte importante) algo asa

Código :

#right{
width: (ancho en pixeles)px;
float:right;
}

donde obviamente (ancho de pixeles) debe ser cambiado por una cantidad


lo demas son simples lineas de divisiones son tanto codigo

No te entendi lo que me pusiste, pero bueno este es el codigo de la primera caja, la que tiene ese filo de hoja a la parta inferior derecha:

Código :

}/*MARCO-BARCOS*/
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 575px;
}

.curlycontainer .innerdiv{
background: transparent url(brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
height: 70px;
}
#gal_1 {
   COLOR: #ffffff;
   width: 100%;
   FONT-WEIGHT: bold;
   FONT-SIZE: 11px;
   FONT-FAMILY: tahoma;
   TEXT-DECORATION: none;
   background-color: #009BC9;
   padding-top:2px;
   padding-bottom:2px;
   
}#bloques {width: 100%;
margin: 0 auto;
margin-bottom:50px;
}
#caja1, #caja2, /*#caja3*/ {
text-align:left;
float: left;
}
#caja2 a{
text-align: right;
text-decoration: underline;
COLOR: #004990; 
}
#caja2 a:hover{
text-align: right;
text-decoration: underline;
COLOR: #000000; 
}
#caja1 {
text-align:left;
width:280px;
background-color: #ffffff;
margin-left: 2px!important;
margin-left: 1px;
}
#caja2 {background-color: #ffffff; width: 265px; text-align:left;}
/*#caja3 {background-color: #ffffff; width: 200px;}
/*menu interno*/
.salto {clear: both;}
#centro {
text-align:center;

Esta mucho codigo?

Y sobre todo como corrigo esa parte en donde esta el texto encima de la linea de abajo de la caja: