[css] float: left ale w jednej linii + scroll Opcje

[phpion]

Hej,
mam taki kod:

[HTML] pobierz, plaintext 
<div id="list">
	<ul>
		<li><nobr><img class="icon" src="/images/icons/folder.png" alt="Folder" /> ..</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/folder.png" alt="Folder" /> img</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/folder.png" alt="Folder" /> kola</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/folder.png" alt="Folder" /> tresc</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white_compressed.png" alt="Page_white_compressed" /> czes</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white.png" alt="Page_white" /> delta</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white.png" alt="Page_white" /> engine</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white_word.png" alt="Page_white_word" /> formularz_osobowy</nobr></li>
	</ul>
	<ul>
		<li><nobr><img class="icon" src="/images/icons/page_white_text.png" alt="Page_white_text" /> gb</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white.png" alt="Page_white" /> index</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white_acrobat.png" alt="Page_white_acrobat" /> javxm3-13</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white_text.png" alt="Page_white_text" /> licznik</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white_acrobat.png" alt="Page_white_acrobat" /> CV</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white.png" alt="Page_white" /> niespodzianka</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white_compressed.png" alt="Page_white_compressed" /> Nowy folder</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white.png" alt="Page_white" /> pion</nobr></li>
	</ul>
	<ul>
		<li><nobr><img class="icon" src="/images/icons/page_white_word.png" alt="Page_white_word" /> symfony</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white_acrobat.png" alt="Page_white_acrobat" /> symfony</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white_acrobat.png" alt="Page_white_acrobat" /> thija4-1</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white_text.png" alt="Page_white_text" /> zf</nobr></li>
		<li><nobr><img class="icon" src="/images/icons/page_white_word.png" alt="Page_white_word" /> zf2</nobr></li>
	</ul>
</div>
[HTML] pobierz, plaintext 

oraz style:

[HTML] pobierz, plaintext 
#list {
	background-color: #FFFFFF;
	border: 1px #CCCCFF solid;
	height: 165px;
	margin: 5px 0px 5px 0px;
	overflow: scroll;
	width: 400px;
}
#list ul {
	float: left;
	list-style: none;
	width: 160px;
}
[HTML] pobierz, plaintext 

Problem leży w tym, że ta trzecia lista ląduje pod pierwszą, natomiast chciałbym osiągnąć efekt aby pozostała obok drugiej. Ogólnie chcę zrobić coś na wzór okienka Otwórz ale z plikami znajdującymi się na serwerze. Dlatego chciałbym aby wszystkie listy znajdowały się obok siebie i aby w div#list pojawił się poziomy scroll do przesuwania zawartości diva. Może zobrazuję to wizualnie:

[HTML] pobierz, plaintext 
lista1 lista2 ... listaN
[HTML] pobierz, plaintext 

a aktualnie układa się to tak:

[HTML] pobierz, plaintext 
lista1 lista2
... listaN
[HTML] pobierz, plaintext 

Da się w jakiś sposób ustawić aby elementy zawsze układały się obok siebie, a nie schodziły niżej jeśli brakuje miejsca na szerokość?

[Zajec]

Zaskoczyłeś mnie, nie mam pojęcia jak to osiągnąć. Gdyby ktoś chciał okrojony live example: http://zajec.net/test/floated.in.horizontal

Załatwiłem to małym hackiem, dodając DIVa - containera - bezpośrednio do listy z ustaloną szerokością. Zobacz powyższy example. Minusem jest, że za każdym razem trzeba obliczyć width, którego będziesz potrzebował :-|

Ten post edytował Zajec 23.07.2007, 12:47:55

[phpion]

Dzięki! Tą szerokość div'a obliczę sobie w php i wyświetlę jako style inline dzięki!

[Kreton]

Może to coś przybliży : http://www.alistapart.com/articles/multicolumnlists/

[Zajec]

Może to coś przybliży : http://www.alistapart.com/articles/multicolumnlists/

Przeczytaj najpierw temat, w którym "doradzasz" :-| Artykuł na alistapart nie ma nic wspólnego z overflow'em.