My Divs won't overlap :S

**lil_bugga** · 03-28-2012 07:08 AM

Hiya, as the title says I can not get my divs to overlap, I'm sure I must be overlooking something really daft, but can't for the life of me see what.

I've tried added different positioning, setting left/right/top with pixel values

I've attached an image of what I'm trying to achieve so I geuss now I should post my code too.

Code:

@charset "utf-8";
/* CSS Document */

body {
	background-color:#000000;
	background-image:url(fade.png);
	background-repeat:repeat-x;
	margin:0px;
}

#container {
	margin-left:auto;
	margin-right:auto;
	width:960px;
}
	
	/* nested within container */	
	#header {
		height:370px;
		width:960px;
	}

		/* nested within header */
		#logo {
			float:left;
			height:370px;
			width:845px;
			z-index:1;
		}
		
		#nav {
			color:#FFFFFF;
			float:right;
			padding-right:10px;
			text-align:right;
			top:50px;
			width:220px;
			z-index:2;
		}
		
		#login_1 {
		}
		
		#login_2 {
		}
		/* end of nested divs */
	
	#content {
		width:960px;
	}
	
	#dates {
		float:left;
		width:140px;
	}
	
	#timeline {
		float:right;
		width:820px;
	}
	/* end of nested divs */

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>lil_bugga's Project Page</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>



<body>

   <div id="container">

      <div id="header">

          <div id="logo">

                 <img src="logo.png" />

          </div><!-- end of logo div -->

          <div id="nav">

                Home<br />

                About Me<br />

                My Plans<br />

                My Progress<br />

                Inventory<br />

                Images<br />

                Videos

          </div><!-- end of nav div -->

      </div><!-- end of header div -->

    

       <div id="content">

            dummy text

       </div><!-- end of content div -->

    </div><!-- end of container div -->

</body>

</html>

**jedaisoul** · 03-28-2012 07:47 AM

Use:
position: absolute;

instead of the default (mplied):
position: static;

then you will need to specify at least:
left: 10px;
top: 10px;
z-index: 1;

and either:
right: 10px;
bottom: 10px;

or:
width: 100px;
height: 100px;

If you define a div without the position: statement, it defaults to "static". If you specify absolute divs, they can overlay statics and each other. The 10px and 100px are just examples, not minima.

Thread: My Divs won't overlap :S

Thread Tools

Display

My Divs won't overlap :S

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions