Why is my box changing sizes? - css

Question

I have a div inside a div. The outer div's job is to position the box, while the inner div's job is to position the text. These divs are within a larger div, but I don't think that's the problem. When I try to put padding on the outer div, or in other words move the box, the padding is applied to the inner div and the box is thus getting bigger in that direction. The top-left hand corner is always stuck to the other div it is inside. How do I make it so that the padding is applied to the outside of the box instead of the inside?
Here is the formatting:
<div style="width:100px;
height:50px;
padding-left:10px;
padding-top:10px;
border: 3px solid #D8BFD8;
align:center;">
<div style="font-size:x-large;
padding-left:40px;
padding-top:0px;
font-family:'Arial';
color:black;">
Profile
</div>
</div>

Answer 1

Not too sure, but by moving the outer box are you sure you haven't mistaken padding with margin? Padding is applied to the inside of the div.
I just changed
padding-left:10px;
padding-top:10px;
to
margin-left:10px;
margin-top:10px;
and increased it to make it more obvious. Also moved the inline css to make it clearer.
http://jsfiddle.net/H334r/3/

Answer 2

1 - For readability, it's generally good practice to not mash a bunch of languages together, even though web dev requires it every now and then.
So separate the css into and throw it in the or use a css stylesheet.
2 - You'll want to have the outer div relative to the page. So in css, position: relative. And the inner div, you want to use an absolute position. So position: absolute.
I took the liberty to clean up code and threw it here in jsFiddle. http://jsfiddle.net/w7Ltp/1/
But if you want the throw it into a html page.
<style>
#outerbox{
width:100px;
height:50px;
padding-left:10px;
padding-top:10px;
border: 3px solid #D8BFD8;
align:center;
position: relative;
}
#innertext{
position: absolute;
font-size:x-large;
padding-left:10px;
padding-top:0px;
font-family:'Arial';
color:black;
}
</style>
<div id="outerbox">
<div id="innertext">
Profile
</div>
</div>

Answer 3

Padding is applied inside an element.
from W3Schools, The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
So if you are applying the padding to your outside div (div with 100px width), the elements inside it are the ones that get affected.
You might want to look at using margin instead. Or it would be better if you set the padding to the parent of the outer div; With that, all elements inside the parent of the outer div will be uniformly spaced.
I see that you have "align: center" for your outer div. Try using "margin: auto".