HTML DIV and padding issue

Question

I have a div[class="container"] and inside is div[class="item"] like:

<style type="text/css">
.container{
    height:50vh;
    width: 32vw;
    text-align: center;
    color: #fff;
    /*padding: 30px;*/
    border: 1px solid rgba(0, 0, 0, 0.13);
}

.imgitem {
    height:100%; /*tried with "calc(50vh - 60px)" too*/
    width: 100%;
}
</style>
<div class="container">
    <div class="imgitem">
        <img src="flower_img.png" style="max-height:100%; max-width:100%" />
    </div>
</div>

What I was expecting is The "container" should preserve width(32vw) and height(50vh) as given in the CSS. But as soon as I'm adding padding to container, its size increases.

Now What I want to achieve is:

1. The outer container should be of given width and height.
2. There must be padding of 30px for the container. Container width/height shouldn't increase after padding.
3. The inner div with the class "imgitem" should have the the remaining width(32vw - 30px -30px) which I mean (container:width - container:padding-left - container:padding-right). Same is with height.

For the layout I am attaching an image:

Can anyone help me out with this. I already spent whole day doing this but have nothing.

[ITS SPECIFIC TO IE10, metro apps]

Thanks

Answer 1

you can use the css3 -moz-box-sizing: border-box; property for your desired results and it will not affect your width & height...with the use of padding...

HTML

<div>demo demo</div>

CSS

div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
    background: none repeat scroll 0 0 red;
    height: 150px;
    padding: 10px;
    width: 150px;
}

see the demo:- http://jsfiddle.net/qpdsZ/10/

Answer 2

I think I understand what your saying. Use margin instead of padding. That should fix your issue. It won't increase the area around your box or its dimensions.

If you have 32 x 50 and add padding you get 62 x 80. Margin won't do this.

Otherwise to actually have 30px in padding space, your dimensions would need to change.

Answer 3

You can do something like this too.

.container{
 height:50px; 
width: 32px;
padding:5px;
color: green;

}

.imgitem {
height:30px; /*tried with "calc(50vh - 60px)" too*/
width: 30px;
padding: 5px;
color:red;
}
 img{
text-align: center;
   height :20px;
 width: 20px;
}

I am basically setting the values manually. You can take this approach too if you wish to.

Thanks.

Answer 4

You may use box-sizing attributes to overcome that situation.

box-sizing : border-box;