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/