En una pagina tengo colocados un div contenedor dentro del cual van dos div en una primera fila y en una segunda linea van tres divs, los cuales se comportan de distinta forma y no se porque. Quisiera que todos hagan un 100% en la altura, pero parece que solo lo hace el div llamado "#cuadrologo". A parte de que se me va muy abajo y no se porque tambien. Los otros dos que tiene al lado se quedan mas cortos y no se porque? ademas con distintas alturas.
este es el codigo:
Código HTML:
<!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>Documento sin título</title>
<style type="text/css">
* {
}
html, body {
height: 100%;
margin: 0px;
background-color: #ede5db;
background-image: url(Floral-Illustration.gif);
background-repeat: no-repeat;
background-position: 1024px 400px;
}
#contenedor {
height: 100%;
width: 1061px;
}
#contenedor #secciones {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: left;
width: 280px;
padding-top: 50px;
padding-left: 37px;
border-right-width: 7px;
border-right-style: solid;
border-right-color: #000;
height: 459px;
background-color: #c7b299;
}
#contenedor #foto img {
float: left;
height: 509px;
width: 730px;
border-right-width: 7px;
border-right-style: solid;
border-right-color: #000;
}
#contenedor #cuadrologo {
background-color: #FFF;
background-image: url(logo.jpg);
background-position: 38px 28px;
width: 217px;
border-top-width: 7px;
border-right-width: 7px;
border-top-style: solid;
border-right-style: solid;
border-top-color: #000;
border-right-color: #000;
height: 100%;
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
padding-top: 168px;
padding-left: 47px;
float: left;
}
#contenedor #texto {
background-color: #736357;
border-top-width: 7px;
border-right-width: 7px;
border-top-style: solid;
border-right-style: solid;
border-top-color: #000;
border-right-color: #000;
width: 459px;
float: left;
height: 100%;
}
#contenedor #continuacion {
float: left;
width: 317px;
border-right-width: 7px;
border-right-style: solid;
border-right-color: #000;
height: 100%;
background-color: #c7b299;
clear: right;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="foto"><img src="prueba1.jpg" width="730" height="509" /></div>
<div id="secciones">que ofrecemos<br />
Ventajas<br />
patitin<br />
patatan<br />
lo que sea<br />
lo que vuelva a ser<br />
no se<br />
y eso que<br />
<br />
<br />
t. 600 000 000<br />
f. 600 000 000<br />
[email protected]<br />
[email protected]<br />
<br />
facebook: lalalalalal<br />
twitter: lolololololo<br />
flickr: lililililili
</div>
<div id="cuadrologo">2011 @ copyright | diseño web: http:// </div>
<div id="texto">Evenet endia dollam, utemporum hiciti blatati osanti ut porendi occupti unt evel ipsum aturitiae estiass imilla vera saperuntibus aut laut moluptatur renimpos mintur, sit que vente eum reptaese ni uta dolupta tiandan diciet quiam re es aturerit fugia inctur?Evenet endia dollam, utemporum hiciti blatati osanti ut porendi occupti unt evel ipsum aturitiae estiass imilla vera saperuntibus aut laut moluptatur renimpos mintur, sit que vente eum reptaese ni uta dolupta tiandan diciet quiam re es aturerit fugia inctur?Evenet endia dollam, utemporum hiciti blatati osanti ut porendi occupti unt evel ipsum aturitiae estiass imilla vera saperuntibus aut laut moluptatur renimpos mintur, sit que vente eum reptaese ni uta dolupta tiandan diciet quiam re es aturerit fugia inctur?</div>
<div id="continuacion"></div>
</div>
</body>
</html>