Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Michelly

[Resolvido] Bordas do DIV e propriedade float do CSS

Por , em Desenvolvimento frontend

Recommended Posts

Michelly    0

Michelly
Postado

Bom dia pessoal!

 

Estou com um pequena dúvida e gostaria de verificar se alguém aqui poderia me ajudar.

 

Seguinte, estou construindo um site que tem todo o seu conteúdo centralizado. Para conseguir isso, coloquei um DIV geral que engloba todo o site e a centralizei usando CSS. Dei a essa DIV a bordas direita e esquerda de 3px na cor branca e fundo escuro para efeito de layout.

 

À medida que vou construindo o site, estou inserindo outras DIVs dentro da DIV geral a fim de organizar o conteúdo do mesmo. No entando, para obter o efeito de colunas dentro da DIV geral, formato as DIVs inseridas usando a propriedade float. E quando uso essa propriedade as bordas da DIV geral somem. No IE isso não acontece, no entanto no Firefox, as bordas direita e esquerda da DIV geral que centraliza o site somem.

 

Gostaria de saber se alguém aqui já enfrentou problema semelhante e que me dessem alguma sugestão. Segue abaixo o código do para vocês visualizarem.

 

Obrigada.

 

Código HTML

 

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Teste de Layout</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="estilo_novo.css" rel="stylesheet" type="text/css">

</head>

 

<body>

 

<!--Div central alinhado ao centro da página-->

<div id="centro">

<div id="painel_navegacao"></div>

<div id="conteudo"></div>

</div><!--Fim DIV central-->

 

</body>

</html>

 

CODE

* {margin: 0; padding: 0; list-style: none; text-decoration: none; border: none;vertical-align: middle; font-family: Verdana, Arial, Helvetica, sans-serif;}

 

body {text-align: center;background: #8D8D8D;}

 

#centro {border-right: 3px solid #FFFFFF; border-left: 3px solid #FFFFFF;width: 1024px;margin: 0 auto;text-align: left; }

#painel_navegacao {background: #E0DFE3;float: left; width: 50%;height: 500px;}

#conteudo {background: #E0DFE3;float: right;border-top: 1px solid #FFFFFF; width: 50%;height: 500px;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Michelly    0

Michelly
Postado

Pessoal!!

 

Consegui resolver... Apenas adicionei a propriedade overflow: hidden no DIV principal (#centro).

 

Apenas dando uma satisfação a todos e para quem passar pelo mesmo problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

WillianAndrade    0

WillianAndrade
Postado

o que aconteceu é que quando você criou um elemento de 1024px (centro)

 

e depois declarou duas bordas de 3px (direita e esquerda)

 

você teria que diminuir 6px = (3px esquerda + 3px direita) do width do elemento (1024px)

 

 

com isso ficaria 1018px de width

 

 

compreendeu? (y)

 

 

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

WillianAndrade, posso estar errado, mas acho que o problema era outro.

 

O importante é que o problema foi resolvido, se puderem olhem o link abaixo:

Div pai não acompanha a altura dos filhos que estão com float. Como fazer para que acompanhe

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Michelly    0

Michelly
Postado

Giovani,

 

O problema era justamente esse descrito no link q você postou! Aprendi bastante coisa sobre o efeito das propriedades CSS em diferentes navegadores, especialmente no uso de DIVs filhos com a propriedade float, que foi o motivo do meu problema.

 

Obrigada a todos. http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Militar    0

Militar
Postado

cara para que o div global acompanhe o conteudo da pagina basta apenas colocar nela ( " display:table; " ) assim e nao sei por que ela acompanha o conteudo no FIREFOX..

 

o display serve pra tirar diversos bugs por exemplo do IE6 o espaçamento fica maior do que no IE7 e FX dai basta apenas colocar display:inline;

 

vejo moh galera atrás disso e tentando descobrir isso..

 

antes de aprender CSS eu usava os famosos hack´s mais agora que sempre tem uma solução pra tudo em CSS =]

 

 

espero ter ajudado

 

abraços e qualquer coisa posta ai

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito