Help
Meu problema é o seguinte.
Tenho uma estrutura de um site, para ter background fluido. Mas o div "content_corpo" não redimensiona o height de acordo com o conteúdo adicionado. Um exemplo é a div "sidebar", que aparentemente não fica dentro do div "content_corpo".
Segue abaixo o código:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="total"><!--Start Total: Todo o site-->
<div class="header">
<div id="content_header"><!--Start Header: Marca, Navigation Bar-->
<div id="marca">
</div>
<div id="navigation">
<ul>
<a href="#"><li>LinkNav</li></a>
<a href="#"><li>LinkNav</li></a>
<a href="#"><li>LinkNav</li></a>
<a href="#"><li>LinkNav</li></a>
<a href="#"><li>LinkNav</li></a>
</ul>
</div>
</div><!--End Header: Marca, Navigation Bar-->
</div>
<div id="slide"><!--Start Slide: Flash ou Jquery-->
<div id="content_slide">
</div>
</div><!--End Slide: Flash ou Jquery-->
<div id="banner"><!--Start Banner: Banner informativo-->
<div id="content_banner">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.</p>
</div>
</div><!--End Banner: Banner informativo-->
<div id="corpo"><!--Start Corpo-->
<div id="content_corpo">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.</p>
<div id="sidebar">
</div>
</div>
</div><!--End Corpo-->
</div><!--End Total: Todo o site-->
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; }
ol, ul { list-style: none; }
:focus { outline: 0; }
.total {
background: #093;
}
.header {
margin: 0 auto;
width: 960px;
}
#content_header {
margin: 0 auto;
width: 960px;
height: 120px;
}
#marca {
width: 200px;
height: 100px;
float: left;
}
#navigation {
width: 450px;
height: 50px;
float: right;
}
#navigation ul {
list-style: none;
}
#navigation ul li {
display: block;
width: 70px;
float: left;
margin: 10px 0 0 15px;
}
#slide {
background: #930;
clear: both;
}
#content_slide {
width: 960px;
margin: 0 auto;
height: 250px;
}
#banner {
background: #666;
clear: both;
}
#content_banner {
margin: 0 auto;
width: 960px;
height: auto;
}
Se alguém puder me ajudar resolver esse problema, porfavor me ajude.
Att,
Luan Arima
