Ir para conteúdo

POWERED BY:

Arquivado

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

<%Rafael%>

Select Box quebrando layout Css

Por , em Desenvolvimento frontend

Recommended Posts

<%Rafael%>    0

<%Rafael%>
Postado

Fala pessoal, beleza?

 

Estou tendo um problema que já tive anteriormente, e por incrível que pareça nunca consegui contornar...

 

Trabalho há algum tempo já com CSS e, hoje, surgiu esse problema novamente.

 

Se tenho uma div com float:left, e outra ao lado (com ou sem float), e em uma das divs, eu coloco um <select>, ele quebra a diagramação da página, jogando a div ao lado para baixo.

 

Abaixo, segue exemplo do código, e um printscreen SEM e outro COM a select box... vejam como fica:

 

1 - Código:

<html>

<head>

<title>Untitled Document</title>

<style>

#geral{

display:table;

background:red;

padding:30px;

width:600px;

}

#div1{

float:left;

background:blue;

padding:20px;

width:150px;

}

 

#div2{

float:right;

background:green;

padding:20px;

width:150px;

}

</style>

</head>

<body>

 

<div id="geral">

<div id="div1">

Aqui a div 1<br /><br />

<select name="teste">

<option>Apenas Teste</option>

</select>

</div>

<div id="div2">Aqui a div 2</div>

</div>

 

</body>

</html>

 

2 - Sem o Select Box, repare que as divs estão "lado a lado"

http://img219.imageshack.us/img219/9769/errosemwc8.gif

 

 

3 - Com o Select Box, repare que as divs quebaram (a da direita caiu)

http://img219.imageshack.us/img219/2118/errocomuw3.gif

 

 

Alguém tem alguma idéia do que pode solucionar isso?

 

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

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