Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde!
Eu quero que meu site fique assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img706.imageshack.us/img706/3268/novo1u.png&key=002c813dfedc77bd2f114c734b3bb15826cdeaa587f41c07e1b057d53bf625ac" alt="novo1u.png" />
A parte mais difícil é fazer com que Box_Left e o Box_Right ocupem 100% de altura,
lembrando que o Box_Content se redimensiona conforme seu conteúdo, por isso a minha dificuldade, o conteúdo dele muda muito, eu não posso colocar uma altura fixa!
Meu código é este:
HTML
<div id="cBoxTop">
<h1>Título do Site.</h1>
</div>
<div id="Container">
<div id="cBoxLeft">
<h1>Menu Esquerdo</h1>
</div>
<div id="cBoxRight">
<h1>Menu direito</h1>
</div>
<div id="cBoxContent">
<p>Conteudo</p>
<p>...</p>
<p>Conteudo</p>
<p>Conteudo</p>
<p>...</p>
<p>Conteudo</p>
<p>Conteudo</p>
<p>...</p>
<p>Conteudo</p>
<p>Conteudo</p>
<p>...</p>
<p>Conteudo</p>
<p>Conteudo</p>
<p>...</p>
<p>Conteudo</p>
<p>Conteudo</p>
<p>...</p>
<p>Conteudo</p>
<p>Conteudo</p>
<p>...</p>
<p>Conteudo</p>
</div>
</div>
<div id="cBoxBottom">
<h4>2011 - Rodapé do Site.</h4>
</div>
CSS
body {
height: 100%;
margin:0;
padding:0;
color:#666;
font:75%/1.4 Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
#Container {
min-width: 1024px;
min-height: 500px;
background-color: yellow;
display: inline-block;
}
#cBoxLeft {
float: left;
width: 200px;
background-color: gray;
}
#cBoxContent {
float: left;
width: 600px;
padding: 10px;
background: aqua;
vertical-align: text-top;
}
#cBoxRight {
float: right;
width: 204px;
background-color: green;
}
#cBoxTop {
width: 1024px;
background:#cfc;
height:100px;
border-bottom:1px dotted #999;
text-align:center;
}
#cBoxBottom {
display: inline-block;
width: 1024px;
background:#cfc;
height:100px;
border-bottom:1px dotted #999;
text-align:center;
}
no código acima, o cBoxRight e o cBoxLeft não ocupam 100% da altura!
Alguém pode me ajudar a resolver este problema?
Carregando comentários...