Problemão com altura de divs

FeLiZaRd0 · Junho 27, 2007

Olá pessoal...

Bom, eu estou tendo sérios problemas para alinhar divs...

Quando o Menu à direita é maior do que o conteudo, ele continua descendo, passando por cima das outras coisas...

OBS: ISSO SÓ ACONTECE NO FIREFOX (testei no ie 6 e no firefox 2)

Pra resolver eu ja tentei de tudo, desde javascript até gambiarras... Perdi um tempão ja procurando solução no google...

Está aqui o código do 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=iso-8859-1" /><title>Pokémon Online Webgame</title><link rel="stylesheet" media="all" href="../subfiles/PTBR/index.css" type="text/css" /><script language="javascript" type="text/javascript">function fixoverflow() {	var CS = document.getElementById('conteudo_section');//	CS.style.height = "350px"; }</script></head><body onload="fixoverflow();"><div id="header"><ul id="menu-horizontal">  	<li><a href="home.php?" target="mainFrame" style="border-right:none;">Home</a></li>  	<li><a href="../Forum/" target="_blank">Fórum</a></li>  	<li><a href="faq.php?">F.A.Q.</a></li>  	<li><a href="about.php?">Sobre</a></li> </ul><h1>Pokémon Online WebGame</h1><div id="lateral-header_e"></div></div><div id="conteudo"><div id="menu" style="width:140px;"><h2><em>Geral</em></h2>	<ul>		<li><a href="general_summary.php">Resumo</a></li>		<li><a href="general_tutorial.php">Tutorial</a></li>		<li><a href="general_settings.php">Configurações</a></li>	</ul><h2><em>Jogo</em></h2>	<ul>		<li><a href="game_battle.php">Batalha</a></li>		<li><a href="game_city.php">Cidade</a></li>		<li><a href="game_pokemons.php">Pokémons</a></li>				<li><a href="game_market.php">Mercado</a></li>		<li><a href="game_informattion.php">Informações</a></li>	</ul><h2><em>Comunidade</em></h2>	<ul>		<li><a href="comunity_challenges.php">Desafios</a></li>		<li><a href="comunity_messaging.php">Messaging</a></li>		<li><a href="comunity_contact.php">Contato</a></li>	</ul></div><div id="conteudo_section"><h2>Em construção</h2><span class="SimpleText">Estamos em construção.</span></div></div><address id="credits"><p style="float:left"><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img        src="../images/w3c_xhtml.bmp"        alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a></p><p style="float:right"> <a href="http://jigsaw.w3.org/css-validator/" target="_blank">  <img style="border:0;width:88px;height:31px"       src="../images/w3c_css.bmp"        alt="Valid CSS!" /> </a></p><p style="position:relative;left:5px">Todos os direitos reservados</p><p style="position:relative;left:5px">Este é apenas um fã-site de Pokémon, sem nenhum fim lucrativo.</p><p style="position:relative;left:5px"><a href="../languages.php" target="_parent">Choose other language.</a></p></address></body></html>

E aqui está o CSS:

/* CSS Document */a:link {text-decoration: none; color:#09C; }a:visited {text-decoration: none; color:#09C; }a:hover { text-decoration: underline; color:#09C; }a:active {text-decoration: none; color:#09C; } * {margin:0;padding:0;list-style:none;text-decoration:none;}body {background:#FAFAFA;font-family: Verdana, Arial, Helvetica, sans-serif;}.SimpleText {	font-size:10px;	font-family: Verdana, Arial, Helvetica, sans-serif;}.SimpleTextSmall {	font-size:9px;	font-family: Verdana, Arial, Helvetica, sans-serif;}.SimpleTextBig { font: 75%/150% "Trebuchet MS", Tahoma, Arial; color:#333; line-height:22px; text-align:justify;}.SimpleTitle { font: 11px Verdana, Tahoma, Arial; color:#333; line-height:10px; font-weight:bold; padding-bottom:4px;}.SimpleEdit {	font-size:9px;	font-weight:bold;	font-family: Verdana, Arial, Helvetica, sans-serif;}.SimpleButton {	font-size:10px;	font-family: Verdana, Arial, Helvetica, sans-serif;	border-width:1px;	border-style:solid;	background:white;	padding: 2px;}div#header {	width:769px;	height:190px;	margin:0 auto;	background:white;	border-width: 1px;	border-style: dashed;	border-color: #CCCCCC;	border-top-color:#FFFFFF;}div#header h1 {text-indent:-90000em;float:left;background:#FFF url(../../images/header_logo.jpg) no-repeat center;width:290px;height:170px;margin:0 0 5px 0;}div#conteudo {	width:749px;	margin:0 auto;	background:white;	border-width: 1px;	border-style: dashed;	border-color: #CCCCCC;	border-top:none;	padding:10px;	padding-bottom:20px;}div#conteudo h2 { font:15px 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight:bold; color:#09C;  margin-bottom:5px;  margin-top:10px;}div#menu { float:right; }div#conteudo_section { width:583px;  }div#lateral-header {float: right;position:relative;top:80px;left:-20px;width:150px;clear:right;vertical-align:bottom;}#menu-horizontal{ 	font: 80% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 	list-style: none; 	margin: 5px;	margin-right: 0px; 	}#menu-horizontal li{ 	width: 60px;	float: right; 	text-align: center; }#menu-horizontal li a{ 	background-color: #fff; 	border-right: 1px solid #ccc; 	color: #666; 	display: block; 	padding: 0px; 	text-decoration: none; }#menu-horizontal li a:hover { 	background-color: #fafafa; 	color: #333; }#subcontent h2 {  margin:18px 0 3px 0;  line-height:1em;  width: 145px;}#menu h2 em{  display:block;  padding:5px 0 4px 10px ;  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;  font-size:13px;  font-style:normal;  font-weight:normal;  width: 135px;  height: 22px;background:#FFF url(../../images/top.gif) top center no-repeat;color: black;}#credits{	width:749px;	margin:0 auto;	background:white;	border-width: 1px;	border-style: dashed;	border-color: #CCCCCC;	border-top:none;	padding:10px;	height:31px;}#credits p{font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:normal;font-style:normal;font-size:9px;}#menu ul {/*  float:left; */  width:120px;  padding: 2px 5px 0 0;  line-height:1.5em;  font-size:10px;  padding: 0 5px 0 0;}#menu ul, #menuleft p {margin:0 10px;}#menu ul li a {	display: block;	padding: 2px 0 2px 9px;	height: 1%; /* IE WIN */	width: 130px;	border-bottom: 1px solid #F8F8F8;	margin-left: -7px;	color: #646464;	}#menu ul li a:hover {background-color: #fafafa; color: #333;}

E aqui está uma printscreen do problema:

http://img215.imageshack.us/img215/102/problemaoll6.png

vlw...

EDIT:Só pra vcs n se perderem, o menu a qual eu me trato é o que tem ID de MENU, não o MENU-horizontal... ok?

Ele é vertical... E quero que a div "conteudo" aumente a altura quando ele aumentar tb.

Eu ja tentei determinar a altura da div do conteudo pra a altura do menu, mas quando o texto PASSA a altura da div, acontece a mesma coisa com o texto...

Agradeço desde já

Nícolas · Junho 27, 2007

Cara isso é problema de float.

Adiciona isso aqui depois desse menu ;)

<div style="clear:both"></div>

Entrar

Arquivado

Problemão com altura de divs

Recommended Posts

FeLiZaRd0 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

comando like (Mysql) no php

Alguém com pratica em subir site em codeigniter4 na Hostinger? Não consigo acessar o bd. Erro de Autenticação. O mesmo site funciona normal em outro servidor web.

mostrar quanto tempo foi postado um conteudo

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante