Mehrere Divs nebeneinander

[SH-Production]

Hi Leute,


ich habe ein äußeres Div das eine variable Größe bekommt (100% x 100%) abhängig von dem was wiederum daraum liegt. (Das muss auch so bleiben)

ich versuche nun beliebig viele divs hineinzulegen die alle nebeneinander liegen sollen.
Die Höhe der inneren Divs ist 100% und Breite festgelegt auf 150px.
Wenn nun nicht genug Platz für die nebeneinander liegenden Divs ist, dann bricht er sie mir in die nächste Zeile um.
Statt dessen soll er aber einen seitlichen scrollbar bringen.

Das habe ich besher geschaft:

<div class="directoryPanelList">
<nobr>
<div class="directoryPanel"></div>
<div class="directoryPanel"></div>
<div class="directoryPanel"></div>

<div class="directoryPanel"></div>
</nobr>
</div>

CSS:

.directoryPanelList {
	align:left;
	position:relative;
	top:0px:
	left:0px;
	width:100%;
	height:100%;
	display:inline;
	overflow:scroll;
}

.directoryPanel {
	align:left;
	float:left;
	width:150px;
	height:100%;
	border-right:1px #999 solid;
	border-top:1px #999 solid;
	border-bottom:1px #999 solid;
	background-color:#FFF;
}

Das ganze soll später so aussehen wie der Finder von Mac OS X .

möglichst Browserkompatibel

Ne Idee was ich nicht bedacht habe

 

[Maik]

Hi,

hierfür müsstest du dem äußeren DIV eine Breite zuweisen, die höher als 100% ist, denn dieser Wert bezieht sich auf die Breite des Viewports (html,body) innerhalb des Browserfensters, und führt daher zum Umbrechen der Elemente, wenn der zur Verfügung stehende Platz nicht ausreicht (zu viele Elemente, oder das Fenster wird horizontal runterskaliert).

 

[SH-Production]

wie schon geschrieben, die 100% des außeren Divs beziehen sich auch den container in dem es liegt. erst der bekommt dann ne feste breite.
das kommt daher, das in ihm auch noch andere divs mit 100% breite liegen. Das ganze soll später per js resized werden. Daher der container dafür, dann muss ich nur den resizen und der Rest geschieht durch das CSS. (das 100%)

Habe ich keine Chance die inneren Divs nebeneinander zu positionieren?
Gibts keine Möglichkeit dem äußeren Div zu sagen es soll nen horizontalen Scollbar anzeigen?

 

[Maik]

Wie gesagt, width:100% bezieht sich auf die verfügbare Breite des Viewports, und solange das äußerste DIV diese Breite besitzt, verbreitert es sich nicht über den Anzeigebereich heraus, und es wird kein horizontaler Scrollbalken angezeigt, sondern die Elemente in die nächste Zeile umgebrochen.