DIVy Opcje

[Krychu1]

Hiho.

[HTML] pobierz, plaintext 
<div style="background: red; width: 900px; margin: 0px auto;">
	<div style="float: left; width: 285px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu lorem sapien. Proin dignissim aliquam diam, in aliquet enim ultricies sed. Mauris ac quam vel lorem accumsan faucibus eget ut turpis. Ut semper ipsum vel quam consectetur accumsan. Donec vestibulum enim ac quam ultrices in cursus ligula gravida. Pellentesque lobortis, orci eget venenatis placerat, turpis nibh mattis sapien, nec commodo dolor felis vitae nisl. Morbi at magna tortor, quis porttitor ipsum. Fusce dapibus leo in metus varius volutpat quis id arcu. Nullam eu sodales elit. Sed pellentesque vehicula faucibus. Proin at fermentum lectus. Sed a nibh eget lacus feugiat aliquet nec vel nisl. Suspendisse sit amet nulla vitae lectus sagittis volutpat commodo id odio.</div>
 
	<div style="float: left; width: 615px;">Suspendisse vitae felis sit amet ligula tincidunt faucibus. Donec id risus quis arcu luctus consectetur vitae ut arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec molestie tincidunt imperdiet. Sed eu orci purus, vitae porttitor odio. Nam porta scelerisque vulputate. Duis augue libero, congue eget pharetra a, imperdiet sed lacus. Donec laoreet urna commodo augue ullamcorper non ullamcorper arcu accumsan. In nec orci ligula, eget auctor velit. Curabitur luctus lacus ac orci malesuada malesuada. Aenean eu sapien vitae justo eleifend mattis nec sit amet lorem. Phasellus id sapien felis, non viverra libero.</div>
</div>
[HTML] pobierz, plaintext 

Moim zamierzeniem było wyświetlenie obok siebie dwóch wyśrodkowanych divów o czerwonym tle.

Efekt jest jednak trochę inny:
(IMG:http://img820.imageshack.us/img820/234/beznazwy1zbq.jpg)

Dodatkowo, w sytuacji gdybym umieścił kolejny (osobny) div pod spodem "dołączyłby" się do powyższego.
Tło pojawia się tylko gdy tekst wpiszę poza divami, które chcę ustawić obok siebie.

Ma ktoś na to pomysł?

Ten post edytował Krychu1 27.04.2011, 14:19:44

[e-mati]

musisz dodać height do atrybutów css'a w pierwszym divie.

[Krychu1]

Określenie konkretnej wysokości nie wchodzi w grę.
Inne pomysły?

Ten post edytował Krychu1 27.04.2011, 14:25:28

[Fantazyn]

[HTML] pobierz, plaintext 
<div style="background: none repeat scroll 0% 0% red; width: 900px; margin: 0px auto;">
	<div style="float: left; width: 285px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu lorem sapien. Proin dignissim aliquam diam, in aliquet enim ultricies sed. Mauris ac quam vel lorem accumsan faucibus eget ut turpis. Ut semper ipsum vel quam consectetur accumsan. Donec vestibulum enim ac quam ultrices in cursus ligula gravida. Pellentesque lobortis, orci eget venenatis placerat, turpis nibh mattis sapien, nec commodo dolor felis vitae nisl. Morbi at magna tortor, quis porttitor ipsum. Fusce dapibus leo in metus varius volutpat quis id arcu. Nullam eu sodales elit. Sed pellentesque vehicula faucibus. Proin at fermentum lectus. Sed a nibh eget lacus feugiat aliquet nec vel nisl. Suspendisse sit amet nulla vitae lectus sagittis volutpat commodo id odio.</div>
 
	<div style="float: left; width: 615px;">Suspendisse vitae felis sit amet ligula tincidunt faucibus. Donec id risus quis arcu luctus consectetur vitae ut arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec molestie tincidunt imperdiet. Sed eu orci purus, vitae porttitor odio. Nam porta scelerisque vulputate. Duis augue libero, congue eget pharetra a, imperdiet sed lacus. Donec laoreet urna commodo augue ullamcorper non ullamcorper arcu accumsan. In nec orci ligula, eget auctor velit. Curabitur luctus lacus ac orci malesuada malesuada. Aenean eu sapien vitae justo eleifend mattis nec sit amet lorem. Phasellus id sapien felis, non viverra libero.</div>
<div style="clear:both"></div>
<div>jestem pod spodem</div>
</div>
 
[HTML] pobierz, plaintext 

W dużym divie dodaj pod koniec diva, który z właściwością/ stylem clear:both - on rozciągnie zewnętrznego diva.

[arecki]

Po drugim wewnetrznym DIV'ie daj:

[HTML] pobierz, plaintext 
<br style="clear:both" />
[HTML] pobierz, plaintext 

[Krychu1]

Świetna robota. Dzięki.

[hieroshima]

zamiast w głownym divie daj kolor w tych divach co masz float, albo jak chcesz kolor mieć w tym głównym to daj mu pozycjonowanie absolutne, albo nadaj kolor nie divowi tylko znacnzikowi body, albo zrób klase clear:both po drugim divie gdzie masz float

---------

O.o Widzę, że mnie 2 osoby wyprzedziły (IMG:style_emoticons/default/tongue.gif) nie ładnie ;>

Ten post edytował hieroshima 27.04.2011, 14:33:19

[lrs_tio]

Float'owane elementy nie rozpychają. Żeby div, który zawiera float'owane divy dostał layout najprostrze i bez zbędnych tagów jest dodanie mu stylu overflow: hidden;