CODEWITHSUNDEEP
htmlcss
lokeshjain2008
lokeshjain2008

Reputation: 1891

padding is getting added to width of div

i use this code

<div class="main">
<div class="babyOne">
</div>
<div class="babyTwo">
</div>
</div>

.main{
width:100%;
position:relative;
}
.babyOne,.badyTwo{
width:50%;
float:left;
}

with this CSS above everything works fine.

but as soon as i give padding to inner divs all the ui breaks, 

.babyOne,.badyTwo{
width:50%;
float:left;
padding:5px;
}

and fire bug shows the increase in the width of divs equal to padding. According to padding property this should not happen. any idea how to prevent this?

Upvotes: 2

Views: 4282

Answers (5)

Mr. Alien
Mr. Alien

Reputation: 157314

First of all you need to learn CSS box-model

enter image description here

This states that whatever padding, border, margin you add to you element does count outside it, so for example the element is of 200px width and 100px height, if you add padding say 5px than the width and height will be 205px and 105px respectively, so inorder to workaround with this you need to use CSS3 box-sizing property, but as still it is CSS3 property and if IE is the main thing you want to supprt, I suggest you to resize the elements according to your needs

So for example a div with these styles

div {
   height: 100px;
   width: 200px;
   padding: 5px;
}

You can re-size the above as 

div {
   height: 95px;
   width: 195px;
   padding: 5px;
}

CSS3 box-sizing Reference

Upvotes: 2

shine
shine

Reputation: 89

.babyOne,.badyTwo{

width:45%; /* As you have like based on padding */

float:left;

padding:5px;

}

Upvotes: 0

diggersworld
diggersworld

Reputation: 13080

Your problem is the expected behaviour.
You set a width and then you say give it some padding.
So the width plus the padding is going to be greater than the original width.

You can try CSS3s box-sizing attribute: http://www.quirksmode.org/css/box.html

I'm not sure how widely supported it is though.

There's also a host of SO answers here: How apply padding in HTML without increasing the div size?

Upvotes: 0

Ignacio Correia
Ignacio Correia

Reputation: 3668

Another solution is display the .baby as a table cell:

.babyOne, .badyTwo {
   display: table-cell;
}

Upvotes: 0

Ignacio Correia
Ignacio Correia

Reputation: 3668

The WRAPPER must have fixed size: http://jsfiddle.net/esVgH/1 example:

.main{
   width:200px;
   position:relative;
}

Upvotes: 1

Related Questions