Forum PHP.pl

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: DIVy

Forum PHP.pl > Forum > Po stronie przeglądarki

Krychu1

27.04.2011, 14:16:10

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:

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

e-mati

27.04.2011, 14:21:30

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

Krychu1

27.04.2011, 14:23:57

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

Fantazyn

27.04.2011, 14:29:15

[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

27.04.2011, 14:29:38

Po drugim wewnetrznym DIV'ie daj:

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

Krychu1

27.04.2011, 14:30:38

Świetna robota. Dzięki.

hieroshima

27.04.2011, 14:32:08

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

nie ładnie ;>

lrs_tio

30.04.2011, 14:32:17

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;

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.