CODEWITHSUNDEEP
csswidthmarginpadding
user3267426
user3267426

Reputation:

Calculating percentage width, margin and padding of inner elements?

I've been told that percentage width of an inner element is calculated based of the total width oh an outer element and margins and paddings of that same inner element is calculated based of a content width of an outer element. When I try do use that it doesn't work. I get everything ( width, padding and margin ) based on content width of an outer element. Here is my CSS: <

style>

html {
    background: url(images/grid.gif) 5px 5px;
}
body {
    font: 100% Arial, Arial, Helvetica, sans-serif;
    }
html, body{
    margin:0 auto;
}
.outer{
    margin:50px;
    padding:50px;
    width:300px;
    height:300px;
    background:red;
}
.inner{
    width:50%;
    height:50%;
    background:navy;
}
</style>

and here is my HTML:

<html>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>

I get width for 50% width of my inner element to be 150px instead of 200px because padding should come into total and that 50px of an outer element padding along with 300px width should give total amount of 400px. Margin shouldn't be part of content width?? I think? So are margin and padding percentages different then the width percentages?

Upvotes: 1

Views: 5971

Answers (3)

Nico O
Nico O

Reputation: 14102

There are different models for calculating container box sizes.

here is a really nice read for more information: http://css-tricks.com/box-sizing/

If you want to have inner exactly to be 50% of outer, you should try to use border-box box-sizing. 

.outer, .inner
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box;  
}

and then apply

.inner
{
    width:50%;
}

Now the padding, border and width of these element will be calculated to the cotainer width.

Update:

Here is a fiddle of both box-sizing methods: http://fiddle.jshell.net/Rx9CX/

Altough my JS is terrible in this example, you can see, that the measuring method you use is also important. If you look at jQuerys width() method (https://api.jquery.com/width/) there is a note to that behaviour:

Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "width" ) rather than .width()

In the fiddle you can see the difference between width() and innerWidth().

Upvotes: 2

Fredric Fohlin
Fredric Fohlin

Reputation: 124

It depends what reader you use.

Try this: http://jsfiddle.net/33EZ3/

.outer{
  margin:50px;
  padding:50px;
  width:300px;
  height:300px;
  background:red;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
      box-sizing: border-box;         /* Opera/IE 8+ */
}
.inner{
  width:50%;
  height:50%;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other G */
  background-color: navy;
}

And read this: http://css-tricks.com/box-sizing/

Upvotes: 0

florin.prisecariu
florin.prisecariu

Reputation: 422

if .outer has width:300px; , then .inner width:50%; means 150px

Upvotes: 0

Related Questions