Umbruch vermeiden bei overflow

[WiMu]

Hallo liebes Forum,

ich stehe gerade total auf dem Schlauch ... auf meiner Seite sollen die section-Bereiche innerhalb eines div (id="sections") horizontal nebeneinander angeordnet sein, jeweils mit voller Breite (quasi wie float:left), aber alles, was über das Eleternelement (id="sections") hinausragt mittels overflow:hidden versteckt werden. Da aber nun dieses Elternelement  schmaler ist als dessen Inhalt, werden logischer Weise die sections untereinander angeordnet. Hier mal das entsprechende HTML:

...  
<article>  
	<div id="sections">  
		<section id="section1">  
			<h1>Abschnitt 1</h1>  
			<p>Inhalt 1</p>  
		</section>	  
		<section id="section2">  
			<h1>Abschnitt 2</h1>  
			<p>Inhalt2</p>  
		</section>  
	</div>  
</article>  
...

Was die Sache etwas kompliziert macht, ist das responsive Design, also dass die Größe der einzelnen Elemente von der Monitor-Größe des Benutzers abhängt, aber das padding innerhalb des articles fix sein soll ... sonst ließe sich das evtl. mit clip: rect([...]) bewerkstelligen(?).
Meine bisherige Lösung positioniert nun die section-Elemente mittels Javascript absolut, was zwar reibungslos funktioniert, aber eigentlich müsste das doch auch ohne script funktionieren; hier mal das CSS ...

html, body {  
	height: 100%;  
	width: 100%;  
	font-size:16px;  
}  
  
header, article, footer {  
	width: 80%;  
	margin: auto;  
}  
  
header, footer {  
	height:10%;  
}  
  
article {  
	height:80%;  
	padding:40px;  
	border:1px solid #464646;  
	-webkit-box-sizing: border-box;  
	-boz-box-sizing: border-box;  
	-moz-box-sizing: border-box;	  
	box-sizing: border-box;	  
}  
  
div#sections {  
	height:100%;  
	width:100%;  
	overflow:hidden;  
	position:relative;  
}  
  
section {  
	width:100%;  
	margin-right:40px;  
	position:absolute;	/* für die Javascript-Lösung */  
	top:0px;		/* für die Javascript-Lösung */  
}

... und der zugehörige (jQuery-)Schnipsel:

$(function() {  
	$('section').each(function(index) {  
		var left = index * ($(this).width() + parseInt($(this).css('marginRight')));  
		$(this).css('left', left);  
	})  
});

Ich habe schon probiert, die sections per display:inline-block in eine Zeile zu quetschen und den Umbruch mit white-space:nowrap zu unterbinden ... was auch funktionierte, aber dann rutscht jede section mit dem Inhalt der vorangegangenen section mit ...

Ich hoffe, ich hab' mich einigermaßen verständlich ausgedrückt. Wäre super, wenn ihr mir helfen könnten.

Liebe Grüße und Dank im voraus,
WiMu

[Matthias Apsel]

Om nah hoo pez nyeetz, WiMu!

Ich hoffe, ich hab' mich einigermaßen verständlich ausgedrückt.

Hm. Ich weiß nicht so recht. Du schreibst, die section-Elemente sollen sich wie gefloatet verhalten, gibst ihnen eine Breite von 100% und schneidest mit overflow: hidden für das übergeordnete Element überfließende Inhalte ab ...

Für mich heißt das, dass nur ein section-Element sichtbar ist und das zweite nie zu sehen und nicht erreichbar.

Matthias

[WiMu]

Für mich heißt das, dass nur ein section-Element sichtbar ist und das zweite nie zu sehen und nicht erreichbar.

Ja, klingt komisch, aber genau so soll es sein ... per javascript werden die section-Elemente dann in den "viewport" rein- bzw. rausgeschoben. Bis zu dem Punkt möchte ich aber so weit wie möglich auf Javascript verzichten. Theoretisch könnte man ja statt des overflow:hidden auch overflow:auto nehmen und dann ließen sich die Elemente (fast) normal scrollen.

Liebe Grüße,
WiMu

[Matthias Apsel]

Om nah hoo pez nyeetz, WiMu!

Ja, klingt komisch, aber genau so soll es sein ... per javascript werden die section-Elemente dann in den "viewport" rein- bzw. rausgeschoben. Bis zu dem Punkt möchte ich aber so weit wie möglich auf Javascript verzichten. Theoretisch könnte man ja statt des overflow:hidden auch overflow:auto nehmen und dann ließen sich die Elemente (fast) normal scrollen.

Für mich wäre display: inline-block genau die richtige Lösung. Je nach gewünschter Browser-Unterstützung wäre auch flex-box interessant, dort insbesondere der Abschnitt "Umbruch von Elementen in einer Flexbox".

Matthias

[WiMu]

Für mich wäre display: inline-block genau die richtige Lösung. Je nach gewünschter Browser-Unterstützung wäre auch flex-box interessant, dort insbesondere der Abschnitt "Umbruch von Elementen in einer Flexbox".

Matthias

Hallo Matthias,

Danke für die Hilfe! inline-block hatte ich schon ausprobiert - das verschiebt die nachfolgenden Section-Elemente je nach Umfang des Inhalts nach unten (hm ... vielleicht ließe sich da was mit line-height machen ...?). Mit flex-box hatte ich vor einiger Zeit noch Probleme, was die browser-Unterstützung angeht - aber das könnte ja mittlerweile behoben sein. Danke jedenfalls für den Tipp, das werde ich mal ausprobieren.

Liebe Grüße,
WiMu

[WiMu]

Für mich heißt das, dass nur ein section-Element sichtbar ist und das zweite nie zu sehen und nicht erreichbar.

Achso ... und man kann mit <a href="#section2">weiter</a> in den nächsten Abschnitt springen - ganz ohne script.

Liebe Grüße,
WiMu

[Matthias Apsel]

Om nah hoo pez nyeetz, WiMu!

absolute Positionierung führt möglicherweise auch zum Ziel. left: (k-1)*100% für das k-te section-Element.

Matthias