Problema para usar o float:left

[logan_pa 0]

Estou montando um página onde existe uma coluna horizontal de noticias 1 e uma coluna de noticias 2. Eu usei float:left para jogar a coluna de noticias 2 abaixo da coluna 1 e não deu certo. A coluna 2 fica colado do lado da primeira coluna. Tentei usar "clear {clear:both;}" mais também não funcionou.

 

Vejam abaixo o jeito que as divisões devem se comportar.

 

 

 

 

/* outras noticias */.outra-noticia {width:179px;height:187px;background:#fff; float:left; margin-right:8px; _margin-right:6px; display:table;}.outra-noticia .foto-outras-noticias {margin:10px; 0px;}.outra-noticia .chamada-outras-noticias {width:160px;}.clear {clear:both;}.outra-noticia h2 a {font: normal normal bold 12px Verdana, Sans-Serif;color:#BF0D0D; text-decoration:none; }.outra-noticia h2 a:hover {color:#BF0D0D; text-decoration:underline; }.outra-noticia .chamada-pequena-outras-noticias {width:160px; margin-top:5px; margin-bottom:10px;}.outra-noticia p a {font: normal normal normal 11px Verdana,Sans-Serif;color:#000000;text-decoration:none;}.outra-noticia p a:hover {color:#000000; text-decoration:underline; }/* noticias sem foto */.noticia-sem-foto {width:179px;height:187px;background:#fff; float:left;}.noticia-sem-foto .clear {clear:both;}.noticia-sem-foto .chamada-noticia-sem-foto {width:160px;height:20px; margin-top:5px;}.noticia-sem-foto h3 a {font: normal normal bold 11px Verdana, Sans-Serif;color:#BF0D0D; text-decoration:none; }.noticia-sem-foto h3 a:hover {color:#BF0D0D; text-decoration:underline; }.noticia-sem-foto .chamada-pequena-noticia-sem-foto {width:160px;height:20px; margin-top:5px;}.noticia-sem-foto p a {font: normal normal normal 11px Verdana,Sans-Serif;color:#000000;text-decoration:none;}.noticia-sem-foto p a:hover {color:#000000; text-decoration:underline; }

<!--- Outras noticias um -->			<div class="outra-noticia clear">		<a href="#"><img src="imagens-home/outra_noticia.jpg" width="160" height="100"  border="0" alt="Clique para ler a notícia" class="foto-outras-noticias"/></a>		<div class="chamada-outras-noticias"><h2><a href="">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a></h2></div>		<div class="chamada-pequena-outras-noticias"><p><a href="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece 		of classical Latin.</a></p></div>	 </div>	 <!--- Fim Outras noticias um -->	  <!--- Outras noticias dois -->			<div class="outra-noticia">		<a href=""><img src="imagens-home/outra_noticia.jpg" width="160" height="100" border="0" alt="Clique para ler a notícia" class="foto-outras-noticias"/></a>		<div class="chamada-outras-noticias"><h2><a href="">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a></h2></div>		<div class="chamada-pequena-outras-noticias"><p><a href="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece 		of classical Latin.</a></p></div>	 </div>	 <!--- Fim Outras noticias dois -->	 <!--- Outras noticias tres -->			<div class="outra-noticia">		<a href=""><img src="imagens-home/outra_noticia.jpg" width="160" height="100" border="0" alt="Clique para ler a notícia" class="foto-outras-noticias"/></a>		<div class="chamada-outras-noticias"><h2><a href="">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a></h2></div>		<div class="chamada-pequena-outras-noticias"><p><a href="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece 		of classical Latin.</a></p></div>	 </div>	 <!--- Fim Outras noticias tres -->	  <!--- noticia sem foto um -->			<div class="noticia-sem-foto">		<div class="chamada-noticia-sem-foto"><h3><a href="">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a></h3></div>		<div class="chamada-pequena-noticia-sem-foto"><p><a href="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece 		of classical Latin literature from 45 BC, making it over 2000 years old.</a></p></div>	 </div>	 <!--- Fim noticia sem foto um -->	  <!--- noticia sem foto dois -->			<div class="noticia-sem-foto">		<div class="chamada-noticia-sem-foto"><h3><a href="">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a></h3></div>		<div class="chamada-pequena-noticia-sem-foto"><p><a href="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece 		of classical Latin literature from 45 BC, making it over 2000 years old.</a></p></div>	 </div>	 <!--- Fim noticia sem foto dois -->	  <!--- noticia sem foto tres -->			<div class="noticia-sem-foto">		<div class="chamada-noticia-sem-foto"><h3><a href="">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a></h3></div>		<div class="chamada-pequena-noticia-sem-foto"><p><a href="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece 		of classical Latin literature from 45 BC, making it over 2000 years old.</a></p></div>	 </div>	 <!--- Fim noticia sem foto tres -->

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

[estevao_lucas 0]

olha cris!!float:left vai jogar o elemento pra esquerda,e o clear:both voce cancela isso!a mesma coisa de naum ter feito nada!pra da um espacamento entre as linhas (coluna1, coluna2 como você disse) basta dah um margin-bottom na coluna1!compriendes??flw

[RicardoTorres 0]

exatamente isso..é aquilo que eu tinha lhe falado no msn.. margin =]

[pa_bruno 0]

tem bastante coisa por ae andré... soh buscar... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[logan_pa 0]

tirei o clear e coloquei o margin-bottom, ainda assim não funfou..

 

veja como está desalinhado

[logan_pa 0]

;)alguem please...

[RicardoTorres 0]

vixi..no firefox ta normal, certinho..mas no ie.. fica uma loucura :/