...

View Full Version : Aligning div's?



breakdown
07-10-2008, 05:17 AM
Hey all, just wondering, how does one float a div over another so that its ontop of another?

I am trying to get this effect:
http://img225.imageshack.us/img225/630/22420679ss1.jpg

But so far I can only float the menu (red) div left and right.

HTML



<!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" />
<link rel="stylesheet" type="text/css" href="../public_html/pages/pseudo.css">
<title>Pseudonym </title>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>

</body>
</html>


CSS:



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

*{
margin: 0px;
padding: 0px;
}

body{
}

.container {
width: 800px;
margin:auto;
}
.header {
background-color:#0000FF;
margin:auto;
height:90px;
}

.content {
background-color:#00CC00;
height:150px;
width: 200;
}

.sidebar {
background-color:#FF0000;
width: 280px;
height: 150px;
}

.footer {
background-color:#CC6600;
height: 60px;
clear: both;

}



I have tried absolute position, which made the menu stick, and thus destroy my layouts flow. I also tried using a wrapper div for the menu, but I haven't got it work so far.

Cheers

effpeetee
07-10-2008, 09:48 AM
Have you tried "z-index:?" to overlay one or the other divs?
You will need to use position:absolute; and position your divs with code. The higher you make z-index: numerically, the nearer to the top.

Done with my wysiwyg editor. (http://exitfegs.co.uk/Pseudonym.html)

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum