float left right

• 27 Nisan 2010

• #1

A

Angelo

0

İyinet Üyesi

Katılım

13 Aralık 2004

Mesajlar

9,603

Reaction score

111

Konum

AZ

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>

 

• 27 Nisan 2010

• #2

T

trgy

Misafir

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

 

• 27 Nisan 2010

• #3

A

Angelo

0

İyinet Üyesi

Katılım

13 Aralık 2004

Mesajlar

9,603

Reaction score

111

Konum

AZ

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.

 

• 27 Nisan 2010

• #4

E

Erturk

Misafir

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.

Genişletmek için tıkla ...

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.

 

• 27 Nisan 2010

• #5

A

Angelo

0

İyinet Üyesi

Katılım

13 Aralık 2004

Mesajlar

9,603

Reaction score

111

Konum

AZ

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

 

• 27 Nisan 2010

• #6

E

Erturk

Misafir

<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>

 

• 27 Nisan 2010

• #7

B

BuRaKm

0

İyinet Üyesi

Katılım

15 Kasım 2007

Mesajlar

148

Reaction score

1

Konum

Ankara

<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 .

 

• 27 Nisan 2010

• #8

A

Angelo

0

İyinet Üyesi

Katılım

13 Aralık 2004

Mesajlar

9,603

Reaction score

111

Konum

AZ

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.

 

• 27 Nisan 2010

• #9

A

Angelo

0

İyinet Üyesi

Katılım

13 Aralık 2004

Mesajlar

9,603

Reaction score

111

Konum

AZ

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

 

• 27 Nisan 2010

• #10

B

BuRaKm

0

İyinet Üyesi

Katılım

15 Kasım 2007

Mesajlar

148

Reaction score

1

Konum

Ankara

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