keyboard
10-04-2013, 11:48 AM
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?
<!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
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?
<!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