I'm working on a little template, and I'm missing something obvious, but really weird.
When one of the divs (the three main divs) is moved up or down, the other two are as well. Why aren't they independent?
HTML Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
background-color:#110F10;
font-family:Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
padding:0;
margin:0;
}
#header {
width:100%;
height:30px;
margin-bottom:10px;
}
#cssmenu ul {
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(nav_bg.png) repeat-x top left;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
#cssmenu li {
display:block;
float:left;
margin:0;
padding:0;
}
#cssmenu li a {
display:block;
float:left;
color:#C7B549;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}
#cssmenu li a:hover {
color:#C7B549;
height:22px;
background:transparent url(nav_bg.png) 0px -30px no-repeat;
}
#cssmenu li.active a {
display:inline;
height:22px;
background:transparent url(nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}
#container {
text-align:center;
height:100%;
}
#container > div {
text-align:left;
display:inline-block;
}
#conLeft {
width:150px;
min-height:1500px;
background-color:orange;
margin-top:50px;
}
.conLeftDiv {
height:10px;
}
#conMiddle {
width:700px;
min-height:1500px;
background-color:#242424;
border-radius:5px;
margin-top:20px;
}
#welcome {
border-radius:inherit;
padding:10px 10px 0px 10px;
height:40px;
background-color:#1E1E1E;
color:#C7B549;
}
#conRight {
width:150px;
height:100%;
}
</style>
</head>
<body>
<div id="header">
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Server</span></a></li>
<li><a href='#'><span>Forums</span></a></li>
</ul>
</div>
</div>
<div id="container">
<div id="conLeft">
Left
</div>
<div id="conMiddle">
<div id="welcome">
<h2>Welcome to XXXXXXXXXXXXXXXXXXXXXXX!</h2>
</div>
</div>
<div id="conRight">
Right
</div>
</div>
</body>
</html>
Thanks,
keyboard
Bookmarks