Padding that does not affect one child - html

Question

I'm making a responsive web design. But my CSS knowledge could have been better. I want a padding on a div, but I don't want it to affect the title.
See this example:
I want the title to be were it is, but the little squares to have a margin at the left side.
I've tried to set a padding and then reset the title position with relative positioning. But I don't like that solution because the title is pushing the squares more than necessary.
I've also tried to set a div where the cross is, but I can't manage to get it under the title and on the left side of all squares since the title is floated left and the squares right.
Here is a fiddle
HTML
<div id="siteContainer">
<div id="titleContainer">
<h1 id="title">This is the long title</h1>
</div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
// more...
</div>
CSS
#siteContainer {
max-width: 800px;
margin: auto;
}
#title {
display: inline-block;
}
#titleContainer {
height: 100px;
margin: 10px;
float: left;
}
.image {
width: 100px;
height: 100px;
margin: 10px;
background: #DDCCAA;
float: right;
}

Answer 1

Whatever you want the padding on the left of the container to be (100px), you can set as a negative text-indent value on the title (-100px).

Answer 2

Did you think about the box model? Do some research on CSS box model and you will see where your problem is.
Let me give you an example:
If you have a div with the width of 100px and add a padding of 10px, the width of your div will be 120px, both sides will take 10px from the padding, you can solve this in two ways, one is to make the div width smaller "80px" and the second is to use box-sizing: border-box;
Hope this helped.