+ Post New Thread
Results 1 to 8 of 8
Web Development Thread, Overlapping DIVs in Coding and Web Development; Onto my next task. I have 2 DIVs one which is the header and one below which is the body. ...
  1. #1

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    17,617
    Thank Post
    514
    Thanked 2,442 Times in 1,890 Posts
    Blog Entries
    24
    Rep Power
    831

    Overlapping DIVs

    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:

    Code:
    ___________________________________
    |                                  |
    |                 |------------|   |
    |_________________|            |___|
    |                 |------------|   |
    |                                  |
    |_________________________________ |

  2. #2
    Iain's Avatar
    Join Date
    Oct 2006
    Location
    Warwickshire
    Posts
    187
    Thank Post
    28
    Thanked 93 Times in 53 Posts
    Rep Power
    31
    Would something like this do what you want?

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<title>DIV Test</title>
    		<style type="text/css">
    			* {
    				margin: 0px;
    				padding: 0px;
    			}
    			body {
    				width: 800px;
    				margin: 10px auto;
    			}
    			#headerdiv {
    				background: #cc0000;
    				height: 100px;
    			}
    			#boxdiv {
    				width: 300px;
    				height: 100px;
    				background: #0000cc;
    				position: absolute;
    				margin: -50px 0px 0px 450px;
    			}
    			#bodydiv {
    				background: #00cc00;
    				height: 100px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="headerdiv">
    			<p>Header DIV</p>
    		</div>
    		<div id="boxdiv">
    			<p>Box DIV</p>
    		</div>
    		<div id="bodydiv">
    			<p>Body DIV</p>
    		</div>
    	</body>
    </html>
    Iain.

  3. Thanks to Iain from:

    localzuk (7th May 2008)

  4. #3

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    17,617
    Thank Post
    514
    Thanked 2,442 Times in 1,890 Posts
    Blog Entries
    24
    Rep Power
    831
    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?

  5. #4
    Iain's Avatar
    Join Date
    Oct 2006
    Location
    Warwickshire
    Posts
    187
    Thank Post
    28
    Thanked 93 Times in 53 Posts
    Rep Power
    31
    I don't think that is possible without using some javascript to calculate the page width and adjust the margins accordingly.

    Iain.

  6. #5
    Ryan's Avatar
    Join Date
    Jan 2008
    Location
    Scotland
    Posts
    537
    Thank Post
    12
    Thanked 16 Times in 15 Posts
    Blog Entries
    1
    Rep Power
    29
    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?

  7. #6
    Iain's Avatar
    Join Date
    Oct 2006
    Location
    Warwickshire
    Posts
    187
    Thank Post
    28
    Thanked 93 Times in 53 Posts
    Rep Power
    31
    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.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<title>DIVs Test</title>
    		<style type="text/css">
    			* {
    				margin: 0px;
    				padding: 0px;
    			}
    			body {
    				width: 100%
    			}
    			#headerdiv {
    				background: #cc0000;
    				height: 100px;
    			}
    			#boxdiv {
    				width: 300px;
    				height: 100px;
    				background: #0000cc;
    			}
    			#bodydiv {
    				background: #00cc00;
    				height: 100px;
    			}
    		</style>
    		<script type="text/javascript">
    			<!--
    			function getWindowWidth() {
    				var windowWidth = 0;
    				if (document.body && document.body.clientWidth) {
    					windowWidth = document.body.clientWidth;
    				}
    				return windowWidth;
    			}
    
    			function setBoxMargin() {
    				if (document.getElementById) {
    					var windowWidth = getWindowWidth();
    					var boxWidth = document.getElementById('boxdiv').clientWidth;
    					var rightMargin = 50;
    					var margin = (windowWidth - boxWidth - rightMargin);  
    					document.getElementById('boxdiv').style.position='absolute';
    					document.getElementById('boxdiv').style.margin='-50px 0px 0px '+ margin +'px';
    				}
    			}
    
    			window.onload = function() {
    				setBoxMargin();
    			}
    
    			window.onresize = function() {
    				setBoxMargin();
    			}
    			-->
    		</script>
    	</head>
    	<body>
    		<div id="headerdiv">
    			<p>Header DIV</p>
    		</div>
    		<div id="boxdiv">
    			<p>Box DIV</p>
    		</div>
    		<div id="bodydiv">
    			<p>Body DIV</p>
    		</div>
    	</body>
    </html>
    Hope that is of some help,

    Iain.

  8. #7

    Join Date
    Jan 2007
    Location
    Lowestoft, Suffolk
    Posts
    84
    Thank Post
    6
    Thanked 4 Times in 4 Posts
    Rep Power
    16
    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.

  9. #8
    Iain's Avatar
    Join Date
    Oct 2006
    Location
    Warwickshire
    Posts
    187
    Thank Post
    28
    Thanked 93 Times in 53 Posts
    Rep Power
    31
    Actually it does seem that you can achieve what you want is css alone (Tested in IE7, FF and Opera):

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<title>DIVs Test</title>
    		<style type="text/css">
    			* {
    				margin: 0px;
    				padding: 0px;
    			}
    			body {
    				width: 100%
    			}
    			#headerdiv {
    				background: #cc0000;
    				height: 100px;
    			}
    			#boxdiv {
    				float: right;
    				width: 300px;
    				height: 100px;
    				background: #0000cc;
    				position: relative;
    				left: -50px;
    				top: -50px
    			}
    			#bodydiv {
    				background: #00cc00;
    				width: 100%;
    				clear: none;
    				height: 100px;
    			}
    			#floatcontainer {
    				width: 100%;
    				position: absolute;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="headerdiv">
    			<p>Header DIV</p>
    		</div>
    		<div id="floatcontainer">
    			<div id="boxdiv">
    				<p>Box DIV</p>
    			</div>
    		</div>
    		<div id="bodydiv">
    			<p>Body DIV</p>
    		</div>
    	</body>
    </html>
    Iain.

SHARE:
+ Post New Thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •