Hola Diego...
He estado echándole un vistazo a lo que tenía realizado y te lo he perfilado para mostrar lo que tú pretendes (eso espero). A continuación te pongo el código de lo que he hecho. Todo está en un mismo archivo, al principio (en el HEAD) te he metido el estilo. Espero que no tengas problema alguno para entenderlo, de todas formas te he puesto comentarios en el código. Aquí lo tienes:
Código :
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Untitled Document</title>
<style type=\"text/css\">
/*Este estilo es para el BODY de la pagina*/
body {
margin:0px;
top:0px;
}
/*Este es el estilo para la capa contenedora*/
#contenedor {
width:678px;
margin-left:auto; /*con margin-left y margin-right:auto lo que hacemos es centrar el DIV contenedor en nuestra ventana*/
margin-right:auto;
margin-top:10px;
}
/*Aqui definimos el estilo para la cabecera*/
#top2 {
height: 51px;
width: 673px;
background-color:#ff9900;
}
/*Te he creado una capa contenedora, col_izq, para los elementos que van dentro de la columna, que son las 2 imagenes*/
/*A col_izq que es la contenedora le he puesto un float:left para que a su lado podamos colocar la zona de contenido*/
DIV#col_izq{
float:left;
}
DIV.left {
width: 100px;
height: 150px;
background-color:#ff3300;
border:1px solid #ff9900;
}
/*Aqui tambien tenemos una capa contenedora para lo que vaya en el contenido*/
#contenido {
width:573px;
vertical-align: top;
float:left;
}
DIV.texto_contenido{
padding:5px;
}
</style>
<body>
<div id=\"contenedor\" >
<div id=\"top2\">Esta sería la cabecera</div>
<div id=\"col_izq\">
<div class=\"left\">Aquí una imagen</div>
<div class=\"left\">Aquí otra</div>
</div>
<div id=\"contenido\">
<div class=\"texto_contenido\">Aquí va el contenido que quieres</div>
</div>
</div>
</body>
</html>Si te fijas la estructura es bien sencilla, tienes que tener en cuenta que tenemos un contenedor general, pero luego cada parte de la estructura la podemos dividir en nuevos contenedores (uno por cada parte). Por ejemplo la columna izquierda donde tenías las dos capas para las imágenes, es un contenedor que contiene sus dos divs correspondiente. Tenemos otro contenedor, que el de contenido, que queremos que vaya al lado del de la columna izquierda. Por ello, al div contenedor col_izq le metemos un float:left para que a su lado aparezca el siguiente contenedor (contenido). No sé si me he explicado correctamente. Debes de tener primero muy clara la estrucutara que va a tener. Cuanto más organizado tengamos nuestro trabajo, ahorraremos tiempo en nuestro proyecto.
También es muy importante tener en cuentas las medidas generales del contenedor, las medidas de cada contenedor interno y luego los margin y paddin, para que todo quede perfectamente colocado.
También te comento, que se te va a dar el caso de que varíe un poco la forma de ver la misma estructura entre cualquier navegador que respete los standares e Internet Explorer, especialmente el 6. Esto pasa con los margins y paddings, pero para solucionarlo busca por ahí Condicionales para IE y verás como introducirlos en tu página para que se vea en IE igual que en el resto de navegadores. Pero eso es otra historia...
Bueno, un saludo y espero haberte ayudado.
