Forums

AzizLight

Hi everybody,
I am trying to design a nice layout for my site, but I am having some problems with the css. Basically I want the sidebar to be on top of the main content (centered) and the header (full width). In other words I want to have something similar to this:
http://uselessgeek.com/youjiii/tests/z-index_tests.png

But I only manage to get this:

http://uselessgeek.com/youjiii/tests/z-index_tests.html

Here is the html/css (that I put in the same file for the sake of testing)


<!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\" xml:lang=\"en\" lang=\"en\">
	<head>
		<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>

		<title>Dark Damask Background</title>
		<style type=\"text/css\" media=\"screen\">
			* { margin: 0; padding: 0; }
			body { background-color: #222; }
			#header 
			{ 
				background-color: #333; 
				height: 200px;
				position: relative; 
				z-index: 11; 
				border-bottom: 2px solid #222; 
			}
			#page-wrap 
			{ 
				width: 960px; 
				margin: -14px auto 50px;
			}
			#wrapper 
			{ 
				display: block; 
				float: left; 
				width: 860px; 
				height: 500px; 
				background-color: #fff; 
				position: relative; 
				z-index: 9; 
				border-top: 2px solid #333;
			}
			#sidebar {
				display: block;
				float: right;
				position: relative;
				z-index: 120;
				background-color: #000;
				width: 300px;
				height: 200px;
				/*margin-top: -300px;*/ 
			}
		</style>
	</head>

	<body>
		<div id=\"header_drop_shadow\">
		<div id=\"header\">
			
		</div>
		</div>
		<div id=\"page-wrap\">
			<div id=\"wrapper\">
				
			</div>
			<div id=\"sidebar\">
			
			</div>
		</div>

	</body>
</html>

Does anybody have any hints or ideas on how I could achieve this (in the cleanest way possible) please?

EDIT: I can't use absolute positionning because if I do the sidebar won't move if I resize the window size. So on big screens since the main content is always centered, the sidebar will end up on top of it. Same problem if I want to make the layout liquid (or elastic for that matter).
That's why I was trying to solve the problem with z-index...

AlCapone

I might be missing something obvious but i cant see any differance bettween the image and what you already have...

AzizLight

Yeah I'm sorry, I actually found the solution and fixed the problem. What I had to do is set the page-wrap to position: relative and then position the sidebar absolutely. In the beginning I was just floating it and using z-index which didn't work at all..

Here is the new code, Problem solved ;)


<!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\" xml:lang=\"en\" lang=\"en\">
	<head>
		<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>

		<title>Dark Damask Background</title>
		<style type=\"text/css\" media=\"screen\">
			* { margin: 0; padding: 0; }
			body { background-color: #222; }
			.clear { clear: both; }
			#header { background-color: #333; height: 200px; position: relative; z-index: 11; border-bottom: 2px solid #222; }
			#page-wrap { width: 960px; margin: -14px auto 0; position: relative;}
			#wrapper 
			{ 
				display: block; float: left; width: 860px; height: 1000px; background-color: #fff; position: relative; z-index: 9; 
				border-top: 2px solid #333;
				border-bottom: 2px solid #333;
				
			}
			#sidebar {
				display: block;
				position: absolute;
				top: -210px;
				left: 630px;
				z-index: 120;
				background-color: #000;
				width: 300px;
				min-height: 680px;
				border-left: 1px solid #444;
				border-right: 1px solid #444;
				border-bottom: 1px solid #444;
			}
			#footer {
				margin: 0 0 0 80px;
				width: 700px;
				min-height: 200px;
				background-color: red;
				margin-bottom: 50px;

			}
		</style>
	</head>

	<body>
		<div id=\"header_drop_shadow\">
		<div id=\"header\">
			
		</div>
		</div>
		<div id=\"page-wrap\">
			<div id=\"wrapper\">
				
			</div>
			<div id=\"sidebar\">
			
			</div>
			<div class=\"clear\"></div> <!-- clear the floats -->
			<div id=\"footer\">
			
			</div>
		</div>
		
		

	</body>
</html>

AlCapone

Congrats..

treehouse : what would you like to learn today?

Forums

Sidebar Placement/z-index problem (I think)