clear:both sem quebrar o div externo

[Felipe Francesco 0]

Pessoal, estou com o seguinte problema:

 

Estou desenvolvendo um formulário com um conjunto de checkboxes que estou colocando em duas colunas. Para tal, utilizei o float:left e as colunas ficaram ok.

 

Porém, nos itens internos eu tenho um label e um input para cada item, mas eu quero que o texto do label não quebre em baixo do checkbox, e portanto, preciso que o checkbox esteja flutuando (float:left).

 

Então para que cada item fique um embaixo do outro, coloco-o dentro de um div com clear:both e é aí que está o problema, pq colocando clear no div de cada um dos itens do formulário, a segunda coluna quebra pois dá o clear no div da coluna mas a idéia era fazê-lo somente no input, entenderam? Como eu faço para que o clear aja somente dentro da coluna e não fora dela?

 

 

<div id="coluna_esquerda">   <div><input type="checkbox" value="1" /><label>item 1</label></div>   <div><input type="checkbox" value="2" /><label>item 2</label></div>   <div><input type="checkbox" value="3" /><label>item 3</label></div> </div> <div id="coluna_direita">   <div><input type="checkbox" value="1" /><label>item 1</label></div>   <div><input type="checkbox" value="2" /><label>item 2</label></div>   <div><input type="checkbox" value="3" /><label>item 3</label></div> </div>

[pa_bruno 0]

cara, posta um link, ou alguma imagem explicando... tah confuso...

outra coisa, codigo mto sujo com mtos divs... divs naum foram feitos para isso... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Felipe Francesco 0]

Obrigado pela resposta Bruno. Eu também achei o código um pouco sujo, mas não consegui pensar em outra solução até agora.

 

Dêem uma olhada:

 

O que eu quero é que o texto do label não quebre embaixo do checkbox, mas fique alinhado.

[pa_bruno 0]

bom... naum testei, mas tenta ae...:

.margemCheck { margin-bottom: 15px; }<input type="checkbox" value="1" class="margemCheck" />

v ae... naum sei... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Felipe Francesco 0]

Então, tentei mas não deu certo. Até pq os inputs estão como inline, olha como ficou no Firefox:

 

Então, até para explicar o primeiro post, eu coloquei float:left; nos inputs (que pode ser nessa classe mesmo), e veja como ficou. Repare que o alinhamento agora está correto, em vermelho:

 

Bom, essa zona toda está aí pq cada grupo está flutuando um do lado do outro certo? Então nos div's que encapsulam cada campo eu coloquei o clear:both e então fica assim:

 

Ou seja, a coluna da direita cai para baixo, já que o clear força ela para descer.

 

Eu pensei em colocar posicionamento absoluto em cada input e pôr uma margem á esquerda nos labels, mas pra mim parece gambiarra, e além disso como tem vários grupos como esse, iria complicar um bocado.

 

Valeu pela ajuda, continua em aberto.

[pa_bruno 0]

uma gambiarra q pode t ajudar:

CSS:

#coluna_esquerda, #coluna_direita {	float: left;	width: 150px;	padding: 10px;}input { float: left; }

HTML:

<div id="coluna_esquerda"><p><input type="checkbox" value="1" /><label>Aparelho de som com CD</label></p><p><input type="checkbox" value="2" /><label>item 2</label></p><p><input type="checkbox" value="3" /><label>item 3</label></p></div><div id="coluna_direita"><p><input type="checkbox" value="1" /><label>item 1</label></p><p><input type="checkbox" value="2" /><label>item 2</label></p><p><input type="checkbox" value="3" /><label>item 3</label></p></div>

[Felipe Francesco 0]

Valeu cara! Funcionou legal agora. Eu só não entendi exatamente porquê. É por causa das margens dos p's?? Mas se o texto crescer muito ñ vai ficar empurrando como estava antes (na segunda imagem do outro post)?

[pa_bruno 0]

talvez fique... faça um teste... qq coisa aumente a margem inferior do input... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif