www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] DIV Spacing

  1. #1
    Join Date
    Jun 2005
    Posts
    20

    resolved [RESOLVED] DIV Spacing

    I'm just getting into HTML and CSS and have a problem with setting the spacing between divs. I've tried to use top and left to position the boxes rather than making use of margins and padding. I'm more used to this method from my Excel UserForm use.

    So for demo purposes of my problem I've created three divs, one above the other each with div inside containing a label. I can get the specified 40px distance at the top of the upper div but not with the middle and low divs, i.e. they are touching. Can this be done with using "top" or do I have to resort to margins and padding. My demo code is as follows:

    Thanks,

    Code:
    <html>
    <head>
    	<title>Div Test</title>
    	<link rel="stylesheet" type="text/css" href="DivTest.css" />
    </head>
    <body>
    	<div class="divOuter">
    		<div class="divInner">
    			<div class="lblLabel">TOP DIV</div>
    		</div>
    	</div>
    	<div class="divOuter">
    		<div class="divInner">
    			<div class="lblLabel">CENTER DIV</div>
    		</div>
    	</div>
    	<div class="divOuter">
    		<div class="divInner">
    			<div class="lblLabel">BOTTOM DIV</div>
    		</div>
    	</div>
    </body>
    </html>
    Code:
    /***** Outer div class *****/
    .divOuter {
    	height: 500px;
    	left: 200px;
    	top: 40px;
    	width: 500px;
    	background-color: #ffffff;
    	border: 1px solid red;
    	margin: 0px;
    	padding: 0px;
    	position: relative;
    }
    
    /***** Inner div class *****/
    .divInner {
    	height: 300px;
    	left: 100px;
    	top: 100px;
    	width: 300px;
    	background-color: #ffffff;
    	border: 1px solid blue;
    	position: absolute;
    }
    
    /***** Label class *****/
    .lblLabel {
    	height: 30px;
    	left: 20px;
    	top: 40px;
    	width: 200px;
    	font-family: "Arial";
    	font-size: 24pt;
    	font-weight: bold;
    	background-color: #ffffff;
    	color: #0000ff;
    	position: absolute;
    }

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,126
    You definitely want to use margins in this case. Top is tricky because it acts weird with the height. To get your desired affect, you'd have to add a different "top" to each of the outer divs. Each one would need to be increased by the desired margin. In this case, 40px. So the first div would be top: 40px, the second would need to be top: 80px and the third would be top: 120px. As you can see, that's just dumb!

    Seems silly not to do things the correct way just because you're "used to this method from my Excel UserForm use."
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,126
    Here's a link to get the desired results using your method:
    http://jsfiddle.net/eNtQF/

    And here's the same method but using margins:
    http://jsfiddle.net/3Gxau/
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  4. #4
    Join Date
    Jun 2005
    Posts
    20
    Thanks for quick reply. You've convinced me, I should use margins. Also, I guess margins would be better to use for inserting more divs later on. Everything would just move down. Thanks again.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles