diseño complicado

[esaenz22]

buenas a todos. tengo una consulta. recurro a ustedes si me pueden ayudar u orientar si existe una solucion para este diseño.

les explico. tengo este diseño de 2 columnas. les mostrare el diseño.



de la maquetacion de las 2 columnas eso ya lo hice. como he mostrado el diseño de las 2 columnas separandolos, la primera columna (quees para el buscador) tiene bordes redondeados, la segunda columna (que es un banner), el lado derecho tiene forma ovalada, es decir, curvilinea.

aqui les muestro las 2 imagenes separadas

primera imagen



segunda imagen (del banner)



mi consulta es la siguiente. hay alguna posibilidad de hacer la maquetacion para la primera imagen que publicado.



como dije antes, de la maquetacion de las 2 columnas eso ya lo hice.

y otra consulta. la segunda imagen (del banner), se puede sobreponer por encima de la primera imagen del buscador, es decir, tapar solo la parte de la imagen de la curva ?.

este es el css para las 2 columnas.

Código CSS:

#cuerpo{
    width:960px;
    height:328px;
    margin:0px auto;
    border:#666666 1px solid;
}
 
#cuerpo_izquierda {
    width:292px;
    height:327px;
    float:left;
}
#cuerpo_derecha {
    width:665px;
    height:327px;
    float:right;
}
 
#banner{
    position:absolute;
    width:665px;
    height:327px;
    float:right;
    top:167px;
    left:354px !important;
}
 

intente cortar las imagenes en 3 partes con la herramienta division, puse el estilo para las 3 columnas, pero aun asi no me sale bien como el del boceto.

me podran ayudar en ello o cual es la posible solucion que puedo dar ?

[Calizman]

Saludos!

Yo lo haria de la siguiente forma:

Hago dos divs, uno izquierdo y uno derecho, y las imagenes las pongo como fondo cortando la imagen asi:



Obviamente, dejo lo que es de fondo como fondo, y el resto (botones y esas cosas) las hago normal.

Espero que eso te ayude.

Hasta Luego!

[esaenz22]

gracias por responder CaLiZzZ. hice eso desde un principio, pero la segunda imagen que mencione (que es el banner)



va ser un flash, es decir, tiene que ser igual que la imagen que estoy mostrando.



porque la segunda columna, que le puse de id banner, esta de esa manera :

Código CSS:

#banner{
    position:absolute;
    width:665px;
    height:327px;
    float:right;
    top:167px;
    left:354px !important;
}
 

al momento de mostrarlo en el ie7, se muestra bien pero en el firefox no se acomoda a la posicion de la imagen.

se puede hacer eso al igual que la primera imagen que he mostrado ?.

saludos.

[kisquian]

Lo que se me ocurre es colocar "buscador" con imagen de fondo un PNG, convirtiendo en transparencia la parte que queda por fuera de la curva blanca (la que no se verá), y luego colocar la capa del flash. Y revisar la función z-index de modo que el buscador (que está puesto por debajo del flash) quede por arriba.

No se si me he explicado bien.

Y lo de superponer el flash, no estoy seguro...

Edito, ahora que veo los float de tu css, los dos deberían tener float:left.

[esaenz22]

gracias por responder Kisquian. aunque creo que el div banner, deberia ser float: left.

alguna otra sugerencia ?.

saludos.

Edito: corregi el div del banner y aun asi no me sale.