Coisa doida quando coloca float:left;

[Fernando Neto MH 13]

Olá Pessoal estou fazendo um site próprio para um painel meu mesmo só que ta dando erro é o seguinte quando eu coloco a div texto-pagina float:left; fica exatamente assim

 

 

COMO EU QUERIA

 

 

ESTILO.CSS

* { margin:0; padding:0; }
body {
background-attachment: fixed;
background-repeat: repeat;
background-position: center top;
font-family: Arial;
font-size: 14px;
color: #E2E2E2;
text-align: center;
margin: 0px;
background-color: #D2D2D2;
overflow-x:hidden;
}

#topo {
margin:0px;
width:100%;
height:200px;
max-height:200px;
background-image: url(../imagens/verde/back_topo.jpg);
background-repeat: no-repeat;
background-position: left;
}
#logo {
width:35%;
height:200px;
float:left;
transition: all .50s ease-in-out;
  -moz-transition: all .50s ease-in-out;
  -webkit-transition: all .50s ease-in-out;

}

#logo2 {
width:65%;
height:200px;
float:left;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 36px;
color: #FF0;
line-height: 200px;
}
#menu, #menu ul {
height: 50px;
width: 100%;
background-color: #0F0;
background-image: url(../imagens/verde/bg_menu.png);
background-repeat: repeat-x;
margin:0;
}
#menu li {
display:inline;
padding:20px;
}

#menu a {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 24px;
color: #FFF;
text-decoration: none;
line-height: 50px;
transition: all .50s ease-in-out;
  -moz-transition: all .50s ease-in-out;
  -webkit-transition: all .50s ease-in-out;
}
#menu a:hover {
color: #FF0;
font-size: 30px;
}
#conteudo {
background-color: #FFF;
margin-top: 10px;
font-family: Arial;
font-size: 24px;
color: #007D00;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
width: 80%;
margin: 0 auto;
background-color: #FFF;
text-align: left;
padding:20px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #007D00;
border-right-color: #007D00;
border-bottom-color: #007D00;
border-left-color: #007D00;
text-shadow: 1px 1px #999;

}

#top10-nome {
font-family: Arial;
font-size: 24px;
color: #007D00;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid #007D00;
margin-top: 10;
width: 200px;
background-color: #FFF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#top10 {
width:30%;
float:left;
margin-top:10px;
}
#separador {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
width:100%;
height:10px;
margin: 0 auto;
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
}
#texto-pagina {
margin-top:10px;
width:600px;


}
#texto-pagina h3 {
color:#333;
font-size:16px;
text-shadow: 0px 0px #000;
text-align: justify;
margin-top:10px;

}
#barra-lateral {
width:300px;
float:left;
margin-top:10px;
}



@charset "utf-8";

.sMenuSlider {
width: 1000x;
margin: 0 auto;
}

/* Banner
----------------------------------------------------------------------------------------------------*/

.sMenu-sombra {
width: 960px;
height: 30px;
margin-left:auto;
margin-right:auto;
background-image: url(../imagens/banner/sombra-banner.png);
background-repeat: no-repeat;
background-position: top center;
clear:both;
}

.bigSlideText {
opacity: 1;
position: absolute;
bottom: 0px;
left: 0px;
margin-bottom: 10px;
margin-left: 10px;
width: 300px; 
padding: 10px;
display:none;
}

.placeHolder {
position: absolute; 
display: block; 
left: 10px; 
width: 300px; 
opacity: 0.8; 
padding: 10px; 
bottom: 10px;
background: #333;
display:none;
}

/* Banner - Imagens
----------------------------------------------------------------------------------------------------*/
ul.sMenu-banner {
width: 650px;
height: 270px;
float: left;
overflow: hidden;
background:#000;
position:relative;
}

ul.sMenu-banner img {
border: none;
}

.sMenu-banner li {
position:absolute;
color: #fff;
font-size: 14px;
line-height:14px;
}

.sMenu-banner h1, 
.sMenu-banner h2,
.sMenu-banner h3, 
.sMenu-banner h4,
.sMenu-banner h5, 
.sMenu-banner h6 {
font-size:18px;
margin-bottom:5px;
line-height:20px;
}

.sMenu-banner a {
text-decoration: none;	
color: #f5cc00;
}

/* Navegacao - Menu de imagens
----------------------------------------------------------------------------------------------------*/
.sMenu-navegacao {
width: 310px;
height: 270px;
float: right;
overflow: hidden;
background-color: #999;
position:relative;
}

.sMenu-navegacao ul {
position:absolute;
top: 0;
}

.sMenu-navegacao li {
height: 80px;
display: block;
padding: 4px 20px;
border-top: solid 1px #e6e6e6;
border-bottom: solid 1px #c9c9c9;
background-color: #fff;	
background-image: url(../imagens/banner/fundo-li.jpg);
background-position: bottom left;
background-repeat: repeat-x;
text-decoration: none;
}

.sMenu-navegacao li a {
text-decoration: none;	
color: #666;
}

.sMenu-navegacao li.liHover {
background-image: url(../imagens/banner/fundo-li-hover.jpg);
background-position: bottom left;
background-repeat: repeat-x;	
}

.sMenu-navegacao li h2 a {
font-size: 18px;
margin-bottom: 5px;
}

.sMenu-navegacao li.liHover a {
color: #12006b;	
}

.sMenu-navegacao li p {
color: #666;
font-size: 12px;
text-decoration: none;
}

.sMenu-navegacao li.sMenu-ativo {
background-image: url(../imagens/banner/fundo-li-active.jpg);
background-position: bottom left;
background-repeat: repeat-x;
text-decoration: none;
cursor: default;
border-top: solid 1px #0d0143;
}

.sMenu-navegacao li.sMenu-ativo a {
color: #f5cc00;
}

.sMenu-navegacao li.sMenu-ativo p {
color: #fff;
}
/* top 10 */
#acc {width:200px; list-style:none; color:#033; margin:0 auto 40px}
#acc h3 {width:200px; border:1px solid #9ac1c9; padding:6px 6px 8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(imags/header.gif)}
#acc h3:hover {background:url(images/header_over.gif)}
#acc .acc-section {overflow:hidden;  width: 200px;}
#acc .acc-content {width:200px; padding:0px; border:1px solid #9ac1c9; border-top:none;}

#nested {width:200px; list-style:none; color:#033; margin-bottom:15px; height:270px;}
#nested h3 {width:200px; border:1px solid #9ac1c9; padding:6px 6px 8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
#nested h3:hover {background:url(images/header_over.gif)}
#nested .acc-section {overflow:hidden; width:200px;}
#nested .acc-content {width:200px; padding:0px; border:1px solid #9ac1c9; border-top:none;}
#nested .acc-selected {background:url(images/header_over.gif)}
/* termina top 10 */

 

INDEX.PHP

<?php
include "header.php";
?>
<body>
<div id="topo">
<div id="logo">
<img src="imagens/verde/LOGO.png" width="300" height="200" /></div>
   	<div id="logo2">
       A Rádio do Brasil</div>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
   <li><a href="#">Programação</a></li>
<li><a href="#">Serviços</a></li>
   <li><a href="#">Fotos</a></li>
<li><a href="#">Videos</a></li>
   <li><a href="#">Contato</a></li>
</ul>
</div>

<div id="conteudo">

       Destaques do Dia

	<ul class="slideMenu">
		<li> 
			<h2><a href="#">Titulo do Post 1</a></h2>
			<p></p>
			<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullam corper orci lectus condimentum.</p>
			<img src="imagens/banner/imagem-1.jpg" title="Titulo da Imagem" alt="Banner" />
		</li>
		<li>
			<h2><a href="#">Titulo do Post 2</a></h2>
			<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullam corper orci lectus condimentum.</p>
			<img src="imagens/banner/imagem-2.jpg" title="Titulo da Imagem" alt="Banner" />
		</li>
		<li> 
			<h2><a href="http://www.google.com.br" target="_blank">Titulo do Post 3</a></h2>
			<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullam corper orci lectus condimentum.</p>
			<img src="imagens/banner/imagem-3.jpg" title="Titulo da Imagem" alt="Banner" />
		</li>
		<li>
			<h2><a href="#">Titulo do Post 4</a></h2>
			<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullam corper orci lectus condimentum.</p>
			<img src="imagens/banner/imagem-4.jpg" title="Titulo da Imagem" alt="Banner" />
		</li>
		<li> 
			<h2><a href="#">Titulo do Post 5</a></h2>
			<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullam corper orci lectus condimentum.</p>
			<img src="imagens/banner/imagem-5.jpg" title="Titulo da Imagem" alt="Banner" />
		</li>
		<li>
			<h2><a href="#">Titulo do Post 6</a></h2>
			<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullam corper orci lectus condimentum.</p>
			<img src="imagens/banner/imagem-6.jpg" title="Titulo da Imagem" alt="Banner" />
		</li>
		<li> 
			<h2><a href="#">Titulo do Post 7</a></h2>
			<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullam corper orci lectus condimentum.</p>
			<img src="imagens/banner/imagem-7.jpg" title="Titulo da Imagem" alt="Banner" />
		</li>
		<li>
			<h2><a href="#">Titulo do Post 8</a></h2>
			<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullam corper orci lectus condimentum.</p>
			<img src="imagens/banner/imagem-8.jpg" title="Titulo da Imagem" alt="Banner" />
		</li>
	</ul>
       <div id="separador">
       </div>
       <div id="texto-pagina">
       <p>Sobre a Rádio</p>
       <h3>        Desde 1937, os veículos do Grupo Bandeirantes de Comunicação estão presentes na cobertura dos principais fatos da história do Brasil e do mundo.

A tradição e credibilidade do jornalismo, a emoção do esporte e os mais variados programas que entretêm, divertem e informam, sempre fizeram parte do dia-a-dia da família brasileira. Acreditamos no futuro e no desenvolvimento do Brasil. Acompanhamos o ritmo acelerado da revolução digital e incorporamos a cada dia as inovações tecnológicas das comunicações aos nossos veículos. Tudo isso para, cada vez mais, desenvolvermos programas e produtos com qualidade.

Nesses últimos anos, o Grupo Bandeirantes de Comunicação cresceu, adquiriu e criou novas marcas e consolidou-se como uma grande empresa de comunicação multimídia. Todo esse crescimento foi suportado única e exclusivamente por empresas e pelo mercado anunciante, que acreditam na diversidade de opinião e apostam no crescimento de um grupo comprometido com os interesses do país.

A emissora foi inaugurada em 6 de Maio de 1937, e hoje com mais de 70 anos de experiência continua renovada e cheia de fôlego para os futuros desafios.

Mantendo a tradição, a Rádio Bandeirantes conta com um renomado time de jornalistas e comunicadores, que fazem da emissora a mais ouvida da cidade.

Responsabilidade da informação, e proximidade com o ouvinte, esta é a Rádio Bandeirantes: Sinônimo de pioneirismo, liderança, credibilidade

Primeira emissora a transmitir com tecnologia digital e via satélite;
24 horas de programação jornalísticas, acompanhando todos os acontecimentos da cidade, do país e do mundo;
Transmissão via satélite para mais de 1.000 municípios brasileiros;
Tradição no esporte: cobertura completa de todos os campeonatos de futebol do Brasil e os principais do exterior.
Presença em todas as copas desde 1958. Na F1, única emissora presente em todos os autódromos do mundo.</h3>
       </div>
       	<div id="barra-lateral">
           <p>TOP 10</p>
           </div>
</div>



<?php
include "rodape.php";
?>

[marcelo2605 10]

Fernando, tenta colocar height:auto nesta div do fundo.

[Diéssica 140]

overflow:hidden;

na div #conteudo (acho que é esse o container)