CSS Percent size specifier sizing element to more than specified size

Question

In CSS, I've never really understood why this happens but whenever I assign something a margin-top:50%, the element gets pushed down to the bottom of the page, almost completely off the page. I would assume with 50%, the element would be halfway down the page.

That also happens with setting the width and height attributes of elements. If I set the width of a div to 100%, the right side of the div goes off the viewable screen and I have to scroll to see it.

Why does that happen and is there a way to fix it?

EDIT:

Here's my css code. I'm also using bootstrap but this is an issue I've noticed outside of bootstrap.

html{
height:100%;
min-height: 100%;
min-width: 100%;
}
#button_container{
width:100%;
clear:both;
margin:0 auto;
margin-top: 25%;
}

#donate_section, #contrib_section{
display:inline;
}
#contrib_section{
float:right;
}

Boiler plate HTML markup:

<body>
    <div id="someid"> 
         <div>
             <a></a>
         </div>
         <div>
             <a></a>
         </div>
     </div>
</body>

To avoid wild guesses any examples of your code would be helpful in finding answer. May by padding, position, tables... — Nebril, Feb 17 '13 at 03:37

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

Read this, and then read it again: http://www.w3schools.com/css/css_boxmodel.asp

Your 'width' setting is setting only the content section - so your total width is content+margin+padding+border. So if width=50%, you really have more like 55% or so after all that (with normal, smallish margins/padding/border). If you want your div to externally take up only 50%, you need to have a no-padding/margin/border div that's 50% outside it, or any number of other solutions.

You also probably are dealing with the fact that browser rendering isn't perfect. If you want to avoid scrolling, you in general shouldn't use 100% of the width. (This is also good "Web 2.0" design, if you follow that school - you should have white space on both sides from a usability/readability standpoint).

Edit: Also, your % is relative to width, not height. See for instance, CSS fluid layout: margin-top based on percentage grows when container width increases .

edited May 23 '17 at 12:04

Community

1
1

answered Feb 17 '13 at 03:40

Joe

62,789
6
49
67

Ok that's fair, as far as not using 100% goes. But I feel like, when I say 50%, it should be 90%. That part doesn't quite make sense. – barndog Feb 17 '13 at 03:44
Sorry I meant shouldn't be 90%. I set the position to fixed and that seems to have fixed it. When I do that, the div goes halfway down the page. Without fixing the position, the div goes off the bottom of the page. Still not sure why. – barndog Feb 17 '13 at 03:53
My edit probably is why... % is relative to width, not height, even for 'high' things like top/bottom. – Joe Feb 17 '13 at 03:54

score 0 · Answer 2 · answered Feb 17 '13 at 03:41

0

The reference is often "relative" to the parent element. Unless you are speaking about the first child of the body tag.

answered Feb 17 '13 at 03:41

ajameswolf

1,650
4
21
43

Yeah first child of the body tag. Just a div that holds two divs that each have a link inside of them. – barndog Feb 17 '13 at 03:41

CSS Percent size specifier sizing element to more than specified size

2 Answers2