Firefox,Chrome Anchor Issue - padding removed from container element CSS

Question

I have a div which contains my page content ( #content )

div #content has padding top of 20 px.

in the #content div I have an anchor link href="#my_form" that is linked to a form lower down on the same page.

When i click the anchor the page scrolls down to the form OK but for some reason the padding is removed from the top of #content div?

Any ideas on how to fix this?

Thanks again

CSS

<style>
#content {padding-top:20px} 
</style>

HTML


<div id="content" class="clearfix">


<div class="title-container"><h1>Apply for credit now</h1></div>

 ...
 ...

<a href="#application_form"><span>Apply now</span></a>

...
...
...
...
...

<a name="application_form"></a>


<form>...</form>

</div>

when Apply now is clicked the div 'title-container' moves hard up against the top of the #content div - padding is removed? Doesn't happen in IE though

Answer 1

Problem Solved

overflow:hidden on the outer container.