Overlapping DIVs

[localzuk]

Onto my next task.

 

I have 2 DIVs one which is the header and one below which is the body. I now want a third div which is over to the right which overlaps both. It will eventually contain a image which changes on a random basis.

 

So in ascii art form it would be like this:

 

___________________________________
|                                  |
|                 |------------|   |
|_________________|            |___|
|                 |------------|   |
|                                  |
|_________________________________ |

[Iain]

Would something like this do what you want?

 

	DIV Test
	<br />
			* {<br />
				margin: 0px;<br />
				padding: 0px;<br />
			}<br />
			body {<br />
				width: 800px;<br />
				margin: 10px auto;<br />
			}<br />
			#headerdiv {<br />
				background: #cc0000;<br />
				height: 100px;<br />
			}<br />
			#boxdiv {<br />
				width: 300px;<br />
				height: 100px;<br />
				background: #0000cc;<br />
				position: absolute;<br />
				margin: -50px 0px 0px 450px;<br />
			}<br />
			#bodydiv {<br />
				background: #00cc00;<br />
				height: 100px;<br />
			}<br />
		


	
		
Header DIV
	
	
		
Box DIV
	
	
		
Body DIV
	

 

Iain.

[localzuk]

That kinda does the job, the only issue is that the underlying div's are not fixed. They change width according to the screen width. Any way of getting the div on top to move accordingly?

[Iain]

I don't think that is possible without using some javascript to calculate the page width and adjust the margins accordingly.

 

Iain.

[Ryan]

Can't use absolute positioning in that case. Do you want the smaller DIV to be a certain distance from the right of the container DIV and stay there, regardless of the width of the container?

[Iain]

The following code should place a fixed width box 50px from the right hand side of a brower window, without a fixed page width. Fairly messy with the javascript, but I'm fairly certain this can't be done with css alone.

 

	DIVs Test
	<br />
			* {<br />
				margin: 0px;<br />
				padding: 0px;<br />
			}<br />
			body {<br />
				width: 100%<br />
			}<br />
			#headerdiv {<br />
				background: #cc0000;<br />
				height: 100px;<br />
			}<br />
			#boxdiv {<br />
				width: 300px;<br />
				height: 100px;<br />
				background: #0000cc;<br />
			}<br />
			#bodydiv {<br />
				background: #00cc00;<br />
				height: 100px;<br />
			}<br />
		
	<br />
			<!--<br />
			function getWindowWidth() {<br />
				var windowWidth = 0;<br />
				if (document.body && document.body.clientWidth) {<br />
					windowWidth = document.body.clientWidth;<br />
				}<br />
				return windowWidth;<br />
			}<br />
<br />
			function setBoxMargin() {<br />
				if (document.getElementById) {<br />
					var windowWidth = getWindowWidth();<br />
					var boxWidth = document.getElementById('boxdiv').clientWidth;<br />
					var rightMargin = 50;<br />
					var margin = (windowWidth - boxWidth - rightMargin);  <br />
					document.getElementById('boxdiv').style.position='absolute';<br />
					document.getElementById('boxdiv').style.margin='-50px 0px 0px '+ margin +'px';<br />
				}<br />
			}<br />
<br />
			window.onload = function() {<br />
				setBoxMargin();<br />
			}<br />
<br />
			window.onresize = function() {<br />
				setBoxMargin();<br />
			}<br />
			--><br />
		


	
		
Header DIV
	
	
		
Box DIV
	
	
		
Body DIV
	

 

Hope that is of some help,

 

Iain.

[PaulBM]

I'm pretty sure if you enclosed all the Divs in a container and set it to position:relative. You can then use position:absolute on divs within that container and their absolute positioning will be relative/contained within the main containing div... if you follow that rambling.

 

I've used that in the past to position text on top images for example.

 

Oh and you may need a z-index to make the overlapping div appear on top of the others. I'll try it out if I get a chance today.

[Iain]

Actually it does seem that you can achieve what you want is css alone (Tested in IE7, FF and Opera):

 

	DIVs Test
	<br />
			* {<br />
				margin: 0px;<br />
				padding: 0px;<br />
			}<br />
			body {<br />
				width: 100%<br />
			}<br />
			#headerdiv {<br />
				background: #cc0000;<br />
				height: 100px;<br />
			}<br />
			#boxdiv {<br />
				float: right;<br />
				width: 300px;<br />
				height: 100px;<br />
				background: #0000cc;<br />
				position: relative;<br />
				left: -50px;<br />
				top: -50px<br />
			}<br />
			#bodydiv {<br />
				background: #00cc00;<br />
				width: 100%;<br />
				clear: none;<br />
				height: 100px;<br />
			}<br />
			#floatcontainer {<br />
				width: 100%;<br />
				position: absolute;<br />
			}<br />
		


	
		
Header DIV
	
	
		
			
Box DIV
		
	
	
		
Body DIV
	

 

Iain.