Sadret: DIVs nicht umbrechen

Beitrag lesen

SELF-Forum

DIVs nicht umbrechen

Sadret
– Informationen zu den Bewertungsregeln

Hallo, anbei ein funktionsfähiger Ausschnitt aus meinem Projekt:

  
<html>  
<head>  
<style>  
@CHARSET "ISO-8859-1";  
  
DIV {  
	font-family: Helvetica, Verdana, Tahoma, Arial, sans-serif;  
	font-size: 15px;  
	float: left;  
	height: auto;  
	width: auto;  
	position: relative;  
	text-align: center;  
}  
  
DIV.box {  
	background-color: rgb(238, 238, 238);  
	border: 1px solid rgb(0, 102, 153);  
	padding: 5px;  
	margin: 5px;  
	min-width: 30px;  
	border: 1px solid rgb(0, 102, 153);  
}  
  
DIV.content {  
	background-color: rgb(255, 255, 255);  
	white-space: nowrap;  
	height: 20px;  
}  
  
DIV.container{  
	clear: both;  
	overflow-x: scroll;  
	max-width: 1000px;  
}  
  
DIV.line {  
	clear: both;  
	height: 42px;  
	background-color: rgb(200, 200, 200);  
}  
</style>  
</head>  
<body>  
	<input id="input">  
	<button  
		onclick="new function(){document.getElementById('content1').style.width=document.getElementById('input').value;document.getElementById('content2').style.width=document.getElementById('input').value};">Update</button>  
	<br />  
	<div class="container box">  
		<div class="line">  
			<div id="content1" class="content box"></div>  
			<div id="content2" class="content box"></div>  
		</div>  
		<div class="line">  
			<div id="content3" class="content box"></div>  
			<div id="content4" class="content box"></div>  
		</div>  
	</div>  
</body>  
</html>

Wenn ich die content-DIVs vergrößere (über das Inputfeld & den Button), dann vergrößert sich automatisch auch das line-DIV und das container-box-DIV. Bei Werten von mehr als ca. 500 vergrößert sich der Container nicht mehr, was ja auch richtig ist, da max-width auf 1000 gesetzt wurde.
Dabei wird die zweite content-Box innerhalb des line-DIVs umgebrochen in eine neue "Zeile". Was ich allerdings haben möchte, ist, dass sich das line-DIV auf >1000 erweitert, sodass beide content-Boxen rein passen und der Scrollbalken des Container genutzt werden kann. (So, wie man es bei Werten von über ca. 1000 sehen kann, wenn eine einzige content-Box schon größer als der Container ist.)

Wie geht das?

Beitrag melden
–
Informationen zu den Bewertungsregeln