Divs shifting over divs? (when one moves, so do the others)

**keyboard** · 10-04-2013, 12:48 PM

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

**Beverleyh** · 10-04-2013, 01:49 PM

Hiya keebs,

You can move the divs up and down independantly if you use position:relative; top:100px; (of whatever value)

As for the why? I *believe* its down to the box model and collapsing margins (they can combine to form one margin, if I'm reading the specs correctly): http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Hope that helps