WiMu: Umbruch vermeiden bei overflow

Beitrag lesen

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