✔ DIV-Blöcke in einem DIV-Wrapper bei overflow:hidden nebeneinander anordnen

erik s.

erik s.

Erfahrenes Mitglied
Hi,

das Topic ist eventuell etwas verwirrend, ich versuche es zu entwirren.
Ich möchte für einen DIV-Layer, der die Eigenschaft overflow:hidden hat, eine eigene Scrollfunktion erstellen. In diesem Layer sollen viele kleine, gleichgroße DIV-Blöcke immer in einer Zeile nebeneinander stehen, die es dann zu scrollen gilt.
Das Problem ist bisher, dass die überstehenden Blöcke aufgrund der beschränkten Breite des Wrappers dann in die nächste Zeile geschoben werden.

Mein Code bisher:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>div test</title>
		<style type="text/css">
			body  {
				background-color:	#ddd;
			}
			.outer_wrapper  {
				border:				1px dotted #000;
				height:				85px;
				overflow:			hidden;
				position:			relative;
				width:				190px;
			}
			.inner_wrapper  {
				white-space:		nowrap;
				width:				auto;
			}
			.block  {
				background-color:	#333333;
				color:				#fff;
				display:			inline-block;
				float:				left;
				height:				80px;
				margin:				1px;
				width:				80px;
			}
		</style>
	</head>
	<body>
		<div class="outer_wrapper">
			<div class="inner_wrapper" style="">
				<div class="block" style="">
					Block 1
				</div>
				<div class="block" style="">
					Block 2
				</div>
				<div class="block" style="">
					Block 3
				</div>
			</div>
		</div>
		<br clear="all" />
		<div class="inner_wrapper" style="">
			<div class="block" style="">
				Block 1
			</div>
			<div class="block" style="">
				Block 2
			</div>
			<div class="block" style="">
				Block 3
			</div>
		</div>
	</body>
</html>
Der zweite, einzeln stehende innere DIV-Layer soll zeigen, wie es quasi in dem äußeren Layer aussehen soll.
Das Ganze sieht dann so aus:
div-layer.png

Aussehen sollte es aber so (mit Photoshop erstellt):
div-layer-soll.png


Danke schon mal.

EDIT: PS: Die Anzahl der Blöcke und damit die Breite des inneren Wrappers soll variabel sein.
 
Zuletzt bearbeitet:
Okay, hat sich schon erledigt.
Wenn man die float-Eigenschaft der Blöcke weglässt, klappt's auch ;-)

Jetzt muss ich mich nur noch bei mir selber bedanken können :D
 
Das läuft dann quasi auf das Gleiche hinaus am Ende. Aber gut zu wissen, dass Andere das Problem auch schon zu bewältigen hatten ;)

Gruß
 
Da es eher unüblich ist, Listen so weit zu "verschandeln", dass deren Elemente nebeneinander sitzen, gehe ich davon aus, dass das auch nicht dein erster Versuch war ;)
 
Uff, meine Güte. Hab ich dich - nein, Moment - hast DU dich an einem schlechten Tag erwischt?
Bleib mal ruhig, du hättest deinen "Danke-Bonus-Punkt" schon noch bekommen. Ich versteh bis heute noch nicht, wie man so besessen darauf sein kann. Sei's drum.

Es tut mir wirklich ausgesprochen leid, dass dich meine Annahme in deiner Ehre angekratzt hat. Ich habe bisher tatsächlich noch nicht mit horizontalen Listen gearbeitet bzw. habe diese Möglichkeit noch nicht gesehen. Dafür: danke.

Aber eins muss ich dir auch noch mit auf den Weg geben, da ich weiß, dass du auf jeden Fall hier nochmal reinschauen wirst (dein Ego drängt dich dazu ;-) ):
Du bist also der Typ Menschenkenner, der nach dem ersten Wortwechsel seinen gegenüber zu 100% ausmachen kann und sich nicht die Mühe macht, mal genauer hinzuhören/-sehen. Dass ich jetzt einen Platz auf deiner Ignorier-Liste bekommen habe, kratzt nicht mal am Klarlack meines Egos. Aber danke für den Hinweis.

Schönen Sonntag noch.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück