what's the best way to pad this div? - css

Question

I'm trying to convert my website from table layout to div layout,
while with the table layout everything was more intuaitive, I get stuck every minute with this div layout, here's my current problem -
I want the text in my left div to be padded from the left and from the top.
If I pad the left DIV itself, the whole div gets expanded (even though the container div has a 700px width defined for it); If I try to margin the text itself, for some reason it only works for creating the left margin, but it doesn't effect the top margin which stays at 0px.
here's my code:
<div id="container">
<div id="left">I want some padding here
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
CSS:
#container {
border: 1px solid #DCD7D4;
width: 700px;
min-height: 680px;
position: relative;
margin-left: auto;
margin-right: auto;
}
#left {
float:left;
width: 500px;
min-height: 680px;
background-color: #F6F1ED;
}
#left #image {
position: absolute;
left: 27px;
bottom: 40px;
background: green;
width: 375px;
height: 48px;
}
#right {
float: left;
width: 194px;
min-height: 680px;
background-color: #F2EEEF;
}
#right #text {
position: absolute;
left: 523px;
top: 154px;
background: yellow;
width: 150px;
height: 70px;
}
#middle {
float:left;
background: #0C9;
background-image:url(midbg.png);
width: 6px;
min-height: 680px;
}

Answer 1

You can add padding to your #left div together with box-sizing: border-box and the layout should remain in tact
#left
{
padding: x px;
-moz-box-sizing: border-box;
box-sizing: border-box
}

Answer 2

Read up on the CSS box model here: http://css-tricks.com/the-css-box-model/
Padding will affect your overall element's specs.
ALSO, this is a great trick for dealing with funky padding of various elements:
http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 3

How about either of these solutions. They work on my browser:
<div id="container">
<div id="left"><span style="padding-left: 10px; padding-top: 10px">I want some padding here</span>
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
OR
<div id="container">
<div id="left"><div style="padding-left: 10px; padding-top: 10px">I want some padding here</div>
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>

Answer 4

if border-box is not working then span should work for you, check this demo
CSS
#left > span {
padding:100px;
position:absolute;
height:100%;
border:1px solid #000;
}
HTML
<div id="left">
<span>I want some padding here</span>
<!-- rest of html -->
`
EDIT
Since, your #left has child divs inside, you can not apply padding option to it.
padding is required on text directly under #left id and not a child div,so, span is suggested as <span> is an inline element and <div> is block level element.