float left right

Angelo

Bir div tagının içinde sağa sola iki ayrı bir div yaslamak istiyorum ancak yasladığım divler, ana alanın içine yerleşmiyor, oradan bağımsız taşarak uzuyor ve bir aşağıdaki bölgenin alanına giriyor.

HTML:

<div id="main-content">
	
	<!-- boyle yazi girdigimde main-content normal asagi dogru uzuyor -->
	h<br>
	t<br>
	a<br>
	
	<!-- bunlar saga sola yaslanmiyor, main-content in disina tasiyor.
	main-content in stilinde ilginc bir espri yok, sadece width ve bg -->
	
	<div style="display: inline; clear: none; float: left; width: 660px;">
	hello<br>
	hop<br>top<br>	
	</div>
	
	<div style="display: inline; clear: none; float: right; width: 160px;">
	hello2<br>
	hop2<br>top<br>	
	</div>	
	
</div>

trgy · 26 Nisan 2010

Sorunu anlayamadım açıkçası. Main content içine yazdığınız yazıların div'i otomatik uzatmasına sebep olur zaten.

Angelo · 26 Nisan 2010

Evet onlar uzatıyor, diyelim ki yeşil backgroundu var main-contentin. Yazı yazdığım kısımlar direk normal olarak devam ediyor. Ancak o float yaptığım divler bağımsız hareket edip yeşilin dışına taşıyor. İçerde kalmıyor.

Erturk · 26 Nisan 2010

Angelo' Alıntı:
Evet onlar uzatıyor, diyelim ki yeşil backgroundu var main-contentin. Yazı yazdığım kısımlar direk normal olarak devam ediyor. Ancak o float yaptığım divler bağımsız hareket edip yeşilin dışına taşıyor. İçerde kalmıyor.

display:inline; kodlarını kaldırırsan sorun olmaz dostum. ayrıca main in boyutu sabitse içteki divlerin boyutunuda sabit tutmanı öneririm. örneğin ana div 500px ise içerigindeki divlerede width:250px; vermen daha saglam olur.

kolay gelsin.

Angelo · 26 Nisan 2010

Olmadı gene.
http://www.how2dategirls.com/test.html

Erturk · 26 Nisan 2010

<div style="width:804px;padding:2px;">
<div style="float:left;width:400px;border:1px solid blue;">
hello<br>
hop<br>top<br>
</div>
<div style="float:right;width:400px;border:1px solid green;">
hello2<br>
hop2<br>top<br>
</div>
</div>

BuRaKm · 26 Nisan 2010

<div style="border: 1px solid red; width: 1200px; padding: 2px;">

<div style="clear: none; float: left; width: 660px;">
hello<br>
hop<br>top<br>
</div>

<div style="clear: none; float: right; width: 160px;">
hello2<br>
hop2<br>top<br>
</div>

<div style="clear:both;"></div>

</div>

Kırmızı ile belli ettiğim kodu eklersen sorun kalmayacaktır .

Angelo · 26 Nisan 2010

Yanyana koyma kısmını zaten yapıyor, ana div'e pink border verdiğimde olan şey sorun. O ana divin dışına taşıyorlar şu anda.

Angelo · 26 Nisan 2010

burakm oldu teşekkürler, ben nedense clear both u tepeye koyuyordum ne akla hizmetse.

BuRaKm · 26 Nisan 2010

Float ları temizleyeceğin için onların altındaki satıra eklemen gerekiyor .