Positioning problemen

HTML & CSS
1

For some stupid reason can’t I get a certain layout to work. What normally quite easy is am I now struggling. It is just a centered layout without the need for a sticky footer, but somehow is most bottom div moving up over the one above. This is the css and html:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
											********************/
html,body,address,blockquote,div,form,fieldset,h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd,p,img {
	margin: 0; 
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
}

html, body {
	width: 100%;
	height: 100%;
}

#wrapper {
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  font-size: .75em
}

#header {
  width: 960px;
  height: 220px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
	background: grey;
}

#slideshow{
  width: 1200px;
  height:450px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
	background: green;
}

#content {
  width: 960px;
  height: 100px;
  margin: -82px auto 0;
  position: relative;
  z-index: 15;
	background: yellow;
}

#top {
	width: 919px;
	height: 24px;
	background: url(../images/site/content_top.png) 0 0 no-repeat;
}

#middle {
	width: 919px;
	padding-bottom: 30px;
	overflow: hidden;
	background: url(../images/site/content.png) 0 0 repeat-y;	
}

.sidebar {
	width: 235px;
	height: 100px;
	margin: 0 0 0 24px;
	float: left;
	background: url(../images/site/gradient_sidebar.png) 0 0 no-repeat;
}

.content {
	width: 613px;
	margin: 0 24px 0 0;
	float: right;
	background: url(../images/site/gradient_content.png) 0 0 no-repeat;
}

#footer {
  width: 960px;
	height: 100px;
  margin: 0 auto;
  background: red;;
  position: relative;

}

</style>
</head>

<body>
<div id="wrapper">

	<div id="header"></div>
  
  <div id="slideshow"></div>
  
  <div id="content">
  	<div id="top"></div>
    <div id="middle">
    
    <div class="sidebar">
    
    </div>
    
    <div class="content">
    
    </div>
    
    
    </div>
  </div>
  
  <div id="footer"></div>

</div>

</body>
</html>

Does anyone see what I am doing wrong here? Like I said the footer div is moving over Content

2

Remove tht top negative margin from Content.


#content {
    background: none repeat scroll 0 0 yellow;
    height: 100px;
   [B] margin:0 auto;[/B]

You also have a stray colon here:


#footer {
	width: 960px;
	height: 100px;
	margin: 0 auto;
	background: red;
	[B];[/B]
	position: relative;
}

You also have an invalid rule at the top:


********************/

Do you really only want 100px height on yuour content?


#content {
	height: 100px;
3

Hi Paul. I use the negative top margin because of an overlapping in the design, from which you can see an example here The invalid rule is actually not a rule but part of a comment which by accident I copied along.

4

Then where is the problem exactly? Apart from the height:100px on Content which I mentioned above then its looking as it should. Youc have Content at height:100px but your inner elements are already taller than that. Avoid height on elements that contain text anyway.

5

High Paul. Sorry you are right. I had the 100px height because I was testing the layout in a separate page to test and forgot to take the height out. Thanks for the tip.