Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    68
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Margin problems!

    I'm developing a basic website for my partner but I'm having some problems with a margin.

    Code:
    			<div class="layer1">
    				<div class="layer2">
    					<div class="layer3">
    						<div class="layer4">
    						<p>I don't understand what's going on here.  The margin on layer4 is affecting layer1, layer 2, and layer3?</p>
    						<p>They grey border above should line up with the grey border on the right, and the text here should have a 20px margin from the top border</p>
    						<p>More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here.</p>
    						</div>
    					</div>
    				</div>
    			</div>
    Code:
    .layer1 { background-image: url(template_images/topmiddle.gif); background-repeat: repeat-x; background-position: top; }
    .layer2 { background-image: url(template_images/topleft.gif); background-repeat: no-repeat; background-position: left top; }
    .layer3 { background-image: url(template_images/topright.gif); background-repeat: no-repeat; background-position: right top; }
    .layer4 { margin: 20px; }
    My question is, why does the layer4 margin affect layer1?

    helenquartley.html

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    What you're saying with the 20px margin is that that the top of that element has to be 20px from the adjacent element. Now, layer4 is right at the top of layer1, so in order for layer 4 to have the margin, so does layer1.

    Also, here, depending on which browser you're using, there is a default top margin on the p element which would also push things down. It's generally a good idea to set all the default margins to zero, since different browsers use different defaults. So have this at the top of your css:

    Code:
    *{margin:0;padding:0;border:none}
    Now, to acheive the effect you want you can use padding, rather than margin, to position what you want - padding will be push content within the div down, whereas margin will push the div down. So:

    Code:
    .layer4{padding:20px}
    should do the trick.


  •  

    Posting Permissions

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