Ein div bis zum Ende eines anderen Divs verlängern

bRainLaG

Mitglied
Hallo liebe Community,
ich habe eine Frage ich habe eine Testseite mit mehreren divs erstellt, dabei ist eines verlänger oder verkürzbar. Nun soll das wenn es verlängert wird automatisch bis an das Ende des divs verlängert werden in dem es sich befindet. Außerdem interessiert mich dabei wie ich bestimmte divs überspringen kann, an denen es nicht enden soll.

HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

<head>
	<title>Testseite</title>
		<script type="text/javascript">
		
		var checkReso = false;
		var mouseLeft = false;
		var breite = 350;
		
		function change(now){
			checkReso = !checkReso;
			breite = parseFloat(now.parentNode.style.width);
				
				if(checkReso){
					mouseLeft = false;
					document.getElementsByTagName('body')[0].style.cursor = "se-resize";
				}
				else{
					document.getElementsByTagName('body')[0].style.cursor = "default";
				}
		}
		
		function move(event){
			if(!checkReso)
				return;
			if(!mouseLeft){
				mouseLeft = event.clientX;
			}
			
			var difX = mouseLeft - event.clientX;
			
			if((breite - difX) > 0)
			document.getElementById('task').style.width = breite - difX + "px";
		}
		
		document.onmousemove = move;
		</script>

	<style type="text/css">
		body, html{
		height:100%;
		width:100%;
		overflow:hidden;
}
	</style>
</head>
	<body>
	
<!--Build the columns for the week dates (Monday...., Sunday)-->
<div style="background-color:#0000FF; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:0px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul1"></div>
<div style="background-color:#0000FF; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:101px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul2"></div>
<div style="background-color:#0000FF; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:202px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul3"></div>
<div style="background-color:#0000FF; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:303px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul4"></div>
<div style="background-color:#0000FF; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:404px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul5"></div>
<div style="background-color:#D02090; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:505px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul6"></div>
<div style="background-color:#D02090; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:606px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul7"></div>
<div style="background-color:#0000FF; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:707px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul8"></div>
<!--//Build for the task in our Grid-->
<div style="background-color:#228B22; height:50px; width:350px; position:relative; left:120px; top:110px;" id="task">
<div style="background-color:#228B22; position:absolute; bottom:0px; right:0px; width:10px; height:50px; cursor:se-resize;" onclick="change(this)"></div>
</div>
	</body>
</html>

Wenn der Code erzeugt wird, erzeugt er Blaue und Rote Spalten, dabei soll zB. bei Blauen bis ans ende des Blauen gezogen werden, und wenn in einer Roten geendet wird, bis zum Ende des nächsten Blauen.
Mir fehlt dazu momentan jede Idee, und ich hoffe ihr habt vieleicht nen Tipp, Trick oder nen Link wo ich Informationen dazu finde.

Ich hoffe ihr könnt mir bei meinem Problem helfen
 
Zurück