www.webdeveloper.com
Results 1 to 10 of 10

Thread: Margin in percentage not working as expected

  1. #1
    Join Date
    May 2005
    Posts
    59

    Margin in percentage not working as expected

    Hi Guys,

    I have never specified the value of margin as percentage. Just out of curiosity I did a little test. I specified 50% margin-top for a div thinking that it will add margin equal to 50% of the height of the body but the result comes out weird. It adds the margin but definitely not 50% . I tried the same with padding-top and it still has the the same sort of outcome. Here is the simple code:

    Code:
    <div style="background-color:#cccccc;text-align:center;height:20px;padding-top:25%">Lets see...</div>
    Can someone please throw a light on this?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    &#37; for padding or margins means % from the element's (the DIV) size, not from the BODY's size.

  3. #3
    Join Date
    May 2005
    Posts
    59
    Hi Kor,

    Thanks for your reply, yes it makes sense it should be percent of the element (div) but still look at the code for the above div. It's a div with 20 px height but with margin-top:25% it moves to the middle of the page. If I add 50% it moves to almost the bottom of the page. There no other elements on the page, it is totall blank.

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Post a link to a test page

  5. #5
    Join Date
    May 2005
    Posts
    59

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Probably it depends on the browser. I guess that you try to center vertically somehow your DIV. That is a weakness of the CSS, so far. Google for: CSS vertical center - there are a lot of workarounds.

  7. #7
    Join Date
    May 2005
    Posts
    59
    Hi Kor, You're right I was experimenting with a workaround to get the div verticaly centered but now the issue isn't that, I just wanna know why by specifying 25% margin the div is almost in the middle of the page?

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by fozail View Post
    I just wanna know why by specifying 25% margin the div is almost in the middle of the page?
    I guess you have already answered yourself that question. It looks like it is not

  9. #9
    Join Date
    Jun 2012
    Posts
    1
    When specified as a percentage, margin and padding always relate to the width of the containing element, not it's height. This happens regardless of whether you are setting top, right, bottom or left margin/padding.

  10. #10
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    This article explains it:
    http://www.mattsnider.com/css-using-...n-and-padding/

    Apparently, it multiples the percentage by the width of the container as Adam noted.

    Test by shrinking your browsers width and watch the bar move up and down.

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