"Hey, I love the site you made for me, but can you move that image a quarter inch to the left? And oh yeah, that font is too close to the edge of the template, can you bump that over to the right an inch or so?"
Well, it's really easy to fix, but you have to know how to do it, so here's a little walkthrough.
Let's suppose we have this situation....an image (represented by the red box below) and some text inside a div tag
Here's how most beginning web developers would do it:
<div style="background:#FFFFFF;width:550px;">
<div style="background:#F1F1F1;width:400px;height:200px;">
<div style="background:red;width:150px;height:150px;float:left;"> </div>
<span>A bunch of random text A bunch of random text A bunch of random text A bunch of random text A bunch of random text</span>
</div>
</div>
And that's fine and dandy, except that the text is bumping up against the image. So here's how to solve that problem:
<div style="background:rgb(255, 255, 255) none repeat scroll 0% 0%;width:550px;">
<div style="background:rgb(241, 241, 241) none repeat scroll 0% 0%;width:400px;">
<div style="background:red none repeat scroll 0% 0%;width:150px;height:150px;float:left;margin:8px;"> </div>
<span>A bunch of random text A bunch of random text A bunch of random text A bunch of random text A bunch of random text</span>
</div>
</div>
