CODEWITHSUNDEEP
css
Niall
Niall

Reputation: 87

CSS: Browser not calculating padding % correctly

I've written up a very basic HTML and CSS page to test out my responsive web design skills but the calculation of the padding is going wrong and I can't figure out why, any help from people would be greatly appreciated.

Below I have added my code for you to see. I have one 'main' with a 'section' and an 'aside' in it. Inside both are a box of two different sizes. I calculated the size and margin of the boxes ok but the padding won't work properly. I calculated the padding by target/context=result, which in this case for the first box is 25px padding / 500px = 0.05 (5%), and for the second box is 25px/300px= 0.08333333 (8.333333%). However this does not cause a 25px padding but instead creates a much bigger one. When I look at the Google Chrome Developer Tool it tells me that the padding for the first box is now 56.875px and the second box is 94.797px.

I've been trying to solve this for sometime now trying different things but can't manage to figure it out.

Any help on this would be greatly appreciated. Code is below.

body, section, aside, p {  
    margin: 0;  
    padding: 0;  
}  

main {  
    width:90%; /* viewport is 1264px wide, 90% width is 1137.590px */  
    background-color: lightgreen;  
    min-height: 1000px;  
    margin: 0 auto;  
}  

section {  
    height: 500px;  
    width: 44.067133%; /* 500/1137.590 */  
    background-color: green;  
    float: left;  
    margin: 04.398736%; /* 50.031/1137.590 */  
    padding: 5%; / 25/500 */  

}

aside {  
    height: 300px;  
    width: 26.434279%; /* 300/1137.590 */  
    background-color: blue;  
    float: right;  
    margin: 04.398736%; /* 50.031/1137.590 */  
    padding: 8.3333333%; /* 25/300 */  
   color: lightblue;  
}  
<body>
  <main>

    <section class="box-green">
      <p>This is a green box</p>
    </section>

    <aside class="box-blue">
      <p>This is a blue box</p>
    </aside>

  </main>
</body>

Upvotes: 0

Views: 270

Answers (3)

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

Although this is not the correct way to write a responsive code but just to make you understand the padding % is not determined from the div size but its determined from the screen size. Also the margin you are using 4.398736% is adding on both left and right side of both the divs. Plus the padding of 5% on both side of .section and padding of 8.33333% on both side of .aside. its making the total size to 115.96555%.

For your understanding if you want both the divs (section and aside) to align side by side. Use the below written css style for both of them.

.section {
height: 500px;
width: 44.067133%;
background-color: green;
float: left;
margin: 02.199736%;
padding: 5%;
display: inline-block;
}

.aside {
height: 300px;
width: 26.434279%;
background-color: blue;
float: right;
margin: 02.199736%;
padding: 5%;
color: lightblue;
display: inline-block;
}

Hope this helps..

Upvotes: 0

rjustin
rjustin

Reputation: 1439

Padding, when given in percents, is based on the containing element not the height of the element itself.

Upvotes: 0

Rob
Rob

Reputation: 15150

When you calculate padding in percentage, that amount is calculated by the width of the containing block, not the height.

https://developer.mozilla.org/en-US/docs/Web/CSS/padding

Upvotes: 1

Related Questions