CODEWITHSUNDEEP
htmlcss
yossi
yossi

Reputation: 296

How to padding img with dynamic padding inside div with permanently size?

I have div width:200px; height:200px this div should be permanently size but is it not. I want to put inside the div img which I can play with padding 10px or 20px each side depend on the configuration of the user . the img size is bigger then 200px and indeed it. my problem is when I play with padding the div not be permanently size it changing according the padding. and I want to separated the padding with size of div. Thx for any help.

My code: 

<!DOCTYPE html>
<html>
<head>

  <style type='text/css'>
    img{
width:180px;
height:180px;
margin:20px;        
}

.container{
    background-color:orange;
    padding:100px;
    width:200px;
    hieght:200px;
}

</style>
</head>
<body>
<div class="container">
    <img src="http://gfx.glittergraphicsnow.com/albums/ll149/glittergn/flower/flower002.gif" >
</div>
</body>
</html>

Here is the Demo Link:

Upvotes: 2

Views: 1574

Answers (2)

My Head Hurts
My Head Hurts

Reputation: 37665

If you want to include the padding in the width of an element you need to use box-sizing:border-box; on that element.

As mentioned by @bski in the comments and @AshwinSingh's answer - you should also use overflow: hidden to hide any overflowing content.

.container{
    background-color:orange;
    padding:100px;
    width:200px;
    height:200px;
    /* add this */
    overflow: hidden;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box
    box-sizing:border-box;
}

Upvotes: 4

Ashwin Singh
Ashwin Singh

Reputation: 7355

The normal behaviour is, div takes up the size of its inner contents even if you give it a fixed size. If the total size of inner contents is greater than the div's size, the div will automatically resize to hold the contents. Remember, div is a container, it contains things.

I would recommend using width:100% and height:100%, to make it resize just enough to hold the content, inclusive of all margins and padding.

If you want to stop that behaviour and use fixed width instead give overflow:hidden property, this will hide anything that's overflowing the div. If you want a scrollbar instead give overflow:scroll property, this will show a scrollbar when the contents overflow.

UPDATE As roger king pointed out, you had height:200px misspelled as hieght:200px

Upvotes: 1

Related Questions