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