Results 1 to 3 of 3

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

  1. #1
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,524
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

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

    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
    Last edited by keyboard; 10-07-2013 at 11:56 AM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,999
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    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
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,524
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Ah, thanks for that!
    Always good to find a nice, easy fix.

Similar Threads

  1. Iframe-divs: a technique for letting divs overlay anything we want
    By molendijk in forum Submit a DHTML or CSS code
    Replies: 0
    Last Post: 03-22-2012, 08:30 PM
  2. Replies: 1
    Last Post: 03-10-2010, 12:10 AM
  3. Layered DIVs / Hide All Other DIVs When DIV is Selected
    By johnnyrokkit in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-05-2009, 06:23 AM
  4. Animated Collapsible DIVS -additional DIVS float aside 3rd DIV
    By jono in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-12-2009, 12:57 PM
  5. Resolved DIVs inside an other div moves to the right
    By alos in forum CSS
    Replies: 2
    Last Post: 11-03-2008, 09:04 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •