How do I set the spacing of the top of a div in a div element

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • JnrJnr
    New Member
    • Oct 2009
    • 88
    #1

    How do I set the spacing of the top of a div in a div element

    Hi people,
    How do I set the spacing of the top of a div from the div that contains it? Can someone please help me with the css code to do so.

    Code:
    <div id="outer">
 <div> id="inner">
 </div>
</div>
    Tags: None
    • Rabbit
      Recognized Expert MVP
      • Jan 2007
      • 12517
      #2
      You could use padding on the outer div, margin on the inner div, relative positioning or absolute positioning. There are many choices.

        Comment

        • John Mollman
          New Member
          • Jul 2011
          • 2
          #3
          As Rabbit said, you could apply padding (spacing on the inside) to the outer div, and then margins (spacing on the outside) to the inner div.

          Try this:

          HTML
          Code:
          <html>
	<head>
		<title>Title</title>
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	
	<body>
		<div id="outer">
			<div id="inner">
				<p>Some text...</p>
			</div>
		</div>
	</body>
</html>

          CSS
          Code:
          #outer {
	width: 350px;
	margin: 0 auto 0 auto;
	padding: 15px;
	border: 1px solid #a4a4a4;
}
#inner {
	margin: 15px;
	padding: 0;
	border: 1px solid #a4a4a4;
}

            Comment

            • JnrJnr
              New Member
              • Oct 2009
              • 88
              #4
              Thanks guys. I wanted my outer div to stay as it is and just the inner div should come down 15px.
              I seem to have come right with padding-top:15px; on the inner div. That doesnt really make sense to me. I seem to be struggling with the css code for Firefox after always working on css for IE. Can someone explain to me whats going on?
              This works for IE but not for Firefox:
              Code:
              #outer {
        height: 49px;
	background-position: center;
	background-repeat:no-repeat;
	background-image:url(url...);	
}
#inner {
        margin-top 15px;
        width:900px;
	margin-left:auto;
	margin-right:auto;
}
              This works for IE and Firefox:
              Code:
              #outer {
        height: 49px;
	background-position: center;
	background-repeat:no-repeat;
	background-image:url(url...);	
}
#inner {
        padding-top 15px;
        width:900px;
	margin-left:auto;
	margin-right:auto;
}

                Comment

                • Death Slaught
                  Top Contributor
                  • Aug 2007
                  • 1137
                  #5
                  Make sure that you are using a doctype. Firefox is displaying what you told it to, and it's doing so correctly. IE places margin before the border in the box model.

                  If you use margin-top instead of padding-top, then it should display the same in both browsers as long as the height of #inner is not exceeding the height set for #outer.

                  Code:
                  #inner { 
        width: 900px; 
        margin: 15px auto;
}
                  Always use Firefox as the initial test browser, follow it with all other modern browsers, and then test in IE.

                  Regards
                  Death

                    Comment

                    • JnrJnr
                      New Member
                      • Oct 2009
                      • 88
                      #6
                      Hi Death, I am using a doctype. The inner div's height is less than the outer divs's height.

                      If I use margin-top instead of padding-top (in the inner div) then the outer div moves down in pixels. If I use padding-top (in the inner div) then the inner div moves down (which I want).

                      The only way this makes sense right now is if the inner div's padding-top is refering to the outer div's top padding that contains the inner div. ?

                        Comment

                        • Jean
                          New Member
                          • Aug 2011
                          • 1
                          #7
                          Give the inner div a margin of 5px;
                          here
                          margin:5px 5px 5px 5px;

                          need more tips check yvenspj.com

                            Comment

                            • Death Slaught
                              Top Contributor
                              • Aug 2007
                              • 1137
                              #8
                              Oops, sorry I was in hurry when I replied to this - at an Orthodontist. The margins are collapsing. This means that the inner division's margin is being added to its parent's margin. So even if you added margin-top: 15px; to the outer division nothing would change. This is because it's the same margin. You can read more about that here.

                              Anyways, you can either double the margin for the inner division, or continue using padding. Keep in mind that padding starts on the outer edge of the element's content, not the element. So to replicate margin correctly, the padding-top: 15px; should be in your outer division's CSS rule.

                              Regards
                              Death

                                Comment

                                • JnrJnr
                                  New Member
                                  • Oct 2009
                                  • 88
                                  #9
                                  Hi Death, Thanks for the site link.
                                  I think I understand a little more and I will check more into the site.

                                    Comment

                                    Previous template Next
                                    Working...