ok tratando de ser mas claro aca les dejo
*tengo una div llamada main
*dentro de esta diferentes divs adicionales por ejemplo uno llamado topheader que va arriba del header, este tiene otros divs adentro para dividirse izquierda derecha (aqui todo bien excepto que en el internet explorer la altura de esta se hace mayor que en el firefox)
*luego tengo header la cual se encuentra dentro de main despues de topheader, aca va el logo y dentro tengo una div llamada nav... (esta div nav quiero que quede en la parte inferior de #header, pero no lo logro, lo habia hecho poniendole toppadding pero en el explorer me dio problemas y tampoco me gusto, quiero que se alinee verticalmente en la parte de abajo de #header... y la propiedad vertical-aligment="bottom" no hace nada =P )
*luego le sigue #banner este tiene un div dentro para colocar la imagen de fondo llamado #bannerimg alineado a la izquierda
y aqui viene mi mayor problema:
*posteriormente tengo unas div llamada #content
*content posee dos dentro de ella #leftcolumn y #rightcolumn ok en rightcolumn ira el contenido de la pagina y se extiende bien al agregarle el texto
pero en leftcolumn he puesto dos divs llamadas #leftColumnTop & #leftColumnBottom una arriba y la otra abajo la #leftColumnTop la dejo disponible para alguas imagenes pequeñas y a veces vinculo o solo texto, pero no siempre lleva algo y #leftColumnBottom lleva una imagen de una chica con una laptop.... esta imagen quiero que se mantenga en la parte de abajo de la pagina SIEMPRE y tiene una altura definida, mientras que #leftColumnTop quiero que se expanda a medida #rightcolumn lo haga
aca dejo el codigo que estoy utilizando
<!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>
<link href="styles/etmain.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="topheader">
<div id="fecha">
<script language="" languaje="JavaScript">
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado")
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre")
document.write("<div class='fecha'> San Salvador. "+dayarray[day]+" "+daym+" de "+montharray[month]+" de "+year+"</div>")
</script>
</div>
<div id="linksTopRight"><a href="java script:;">HOME</a>-<a href="java script:;">CONTACT</a></div>
</div>
<div id="header">
<div id="nav"> Content for id "header" Goes Here</div>
</div>
<div id="banner">
<div id="bannerimg"></div>
</div>
<div id="content">
<div id="leftcolumn">
<div id="leftColumnTop"> </div>
<div id="leftColumnBottom"> </div>
</div>
<div id="rightcolumn"> </div>
</div>
<div id="footer"><span class="copy">Copyright © 2006 ExecuTrain El Salvador - All Rights Reserved </span></div>
<div id="barragris"></div>
</div></body>
</html>y este es el css
body {
text-align: left;
background-color: #93B9C3;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
margin: 55px 0px 0px;
background-image: url(../images/body_bg.gif);
background-repeat: repeat-x;
}
#main {
width: 80%;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 3em;
margin-left: auto;
}
#topheader {
height: 19px;
background-color: #666666;
vertical-align: middle;
}
#fecha {
width: 50%;
float: left;
vertical-align: middle;
text-align: left;
height: 100%;
}
#linksTopRight {
width: 50%;
float: right;
vertical-align: baseline;
text-align: right;
height: 100%;
}
#header {
height: 100px;
background-color: #FFFFFF;
background-image: url(../images/etlogo.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
#nav {
width: 70%;
text-align: left;
vertical-align: bottom;
}
#banner {
background-color: #999999;
height: 12em;
background-image: url(../images/bggris.gif);
background-repeat: repeat-x;
}
#bannerimg {
background-image: url(../images/banner.jpg);
height: 100%;
width: 490px;
}
#content {
background-color: #999999;
height: 300px;
width: 100%;
}
#leftcolumn {
width: 20%;
background-color: #999999;
float: left;
height: 100%;
margin: 0px;
background-image: url(../images/bglaptop.jpg);
background-repeat: repeat-x;
background-position: bottom;
}
#leftColumnTop {
clear: both;
height: 100%;
width: 100%;
background-image: url(../images/bggris.gif);
background-repeat: repeat-x;
}
#leftColumnBottom {
height: 132px;
width: 100%;
clear: both;
text-align: left;
vertical-align: bottom;
background-image: url(../images/laptop.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
#rightcolumn {
text-align: left;
float: right;
background-color: #FFFFFF;
width: 80%;
height: inherit;
margin: 0;
background-image: url(../images/bgblanco.gif);
background-repeat: repeat-x;
}
#footer {
background-color: #666666;
height: 30px;
clear: both;
width: 100%;
}
#barragris {
background-color: #CCCCCC;
height: 30px;
clear: both;
}
.fecha {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.6em;
color: #FFFFFF;
}
para que se hagan una mejor idea de lo que trato de hacer aca les dejo el link de la pagina actual... esta hecha con tablas... pero ahi me funciono todo solo que es un resto de codigo
asi quiero que me quedegracias me quedo esperando una respuesta
