Olá amigos, muito tempo atrás me deparei com uma situação que me fez perder algumas horas de tentativas até conseguir resolver o problema, foi o seguinte:
Eu fiz uma div com duas divs internas, essas duas divs tinha a propriedade float, porém notei que ao aplicar o float nessas divs a div externa perdeu a propriedade que é padrão das divs, height auto.
Depois de umas boas horas tentando resolver o problema eu encontrei a solução na internet, que na verdade é algo bem simples de se fazer!
Outro dia me deparei novamente com este problema, então resolvi compartilhar a solução com vocês afinal muitos outros podem ter enfrentado este problema.
A solução é simples, basta se usar a propriedade overflow com o estado hidden do CSS.
Veja como:
HTML
Espera que seja útil a alguém
Eu fiz uma div com duas divs internas, essas duas divs tinha a propriedade float, porém notei que ao aplicar o float nessas divs a div externa perdeu a propriedade que é padrão das divs, height auto.
Depois de umas boas horas tentando resolver o problema eu encontrei a solução na internet, que na verdade é algo bem simples de se fazer!
Outro dia me deparei novamente com este problema, então resolvi compartilhar a solução com vocês afinal muitos outros podem ter enfrentado este problema.
A solução é simples, basta se usar a propriedade overflow com o estado hidden do CSS.
Veja como:
- Código:
overflow: hidden;
HTML
- Código:
<div id="div_externa">
<div id="div_interna_left">Conteúdo a esquerda</div>
<div id="div_interna_right">Conteúdo a direita</div>
</div>
- Código:
#div_externa{
background: #f9f9f9;
box-shadow: #000 0 0 2px;
padding: 6px;
border-radius: 2px;
font: 11px 'Trebuchet MS';
width: 400px;
overflow: hidden;
}
#div_interna_right{
float: right;
}
#div_interna_left{
float: left;
}
Espera que seja útil a alguém