In html, how is a child element's percentage-based size calculated when its parent has padding?


Tags: html,css

Problem :

In the following example, the outer yellow box is 240px wide (width of 200 plus padding of 20 on left and right).

Its red child has width set to 50%. If you measure the red box as rendered, its width is 140px. See here.

I'm not sure how that value is calculated. Seems that to respect the padding of the parent, the child's width should be 100 (50% of 200 is 100). Or, if padding is included in the calculation, it should be 120 (50% of 240 is 120). I can't get to 140...

If I set the child's width to 100%, the child ends up being 240px wide. See here.

This would indicate that padding is indeed included in the calculation (100% of 240 is 240). Ok, then 50% should yield 120 (50% of 240 is 120), but it doesn't.

So, according to my browser, 100% of 240 is 240 and 50% of 240 is 140. DOH!

I must be missing something. I'm sure there's a formula involved, but I can't find it documented.

Here are the CSS styles in question:

div {
    background-color:yellow;
    padding-left:20px;
    padding-right:20px;
    width:200px;
    height:200px;
}
div.child {
    background-color:red;
    width:50%;
    height:50%;
}

Thanks!



Solution :

makes perfect sense (jk). It's because the child div is inheriting the parent's padding.


    CSS Howto..

    How to override PrimeFace CSS to customize my button?

    How do I apply a max-width to an input field form-control with a trailing secondary button in Bootstrap 3?

    How to Triger a css animation for a y element from a a trigger x

    How to change text from black to white upon hover on background black?

    Building a DOS-feel script. How to make the command line?

    How to edit rails app in production env, specifically CSS

    CSS-3 - How can I place a white space holder above two columns?

    How to add wikipedia in to a wordpress plugin

    How can I improve this markup and CSS to keep things simple and easy to work with?

    Show just the necessary div when user clicks on a targeted div

    how to save the datas which are get from a newsletter? [closed]

    Bootstrap - How to move styles in HTML to the .css from the example

    How do I stop css pushing
  • to the right?
  • How to convert a .PNG file into a source code that can be stored into mysql and called up via CSS as “png”

    How to do like this list using
  • and CSS?
  • How to deal with different stylesheets (WYSIWYG Editor and Webpage one) in the same page?

    How to align vertical text horizontally center?

    How to display child elements of
  • at 100% height?
  • How can I use CSS styling in my GTK# application?

    How to apply css class for selected element in jquery or javascript?

    How to understand other people's CSS architectures?

    How to process which button is selected in an HTML form?

    How to find and delete specific row in blogger css with span tag?

    How to fix width of DIV that contains floated elements?

    How to size this text with css?

    How can I add a transition effect when opening my custom modal window?

    how to center and Crop an image to square with CSS

    How to place html css php in javascript (Jquery)

    how to scale img by percentage of self and not percentage of its container

    How to slide/grow a tile to position with 90x90px with CSS