overflow problem

I have the following markup,

开发者_开发问答    <section class="top">
        <article class="the-team">
            <section>
            <img width="106" height="113" title="key-staff-tim" alt="key-staff-tim" class="attachment-post-thumbnail wp-post-image" src="test.jpg">             
               <section class="biography">
               <h3>name &ndash; position</h3>
               <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
            </section>
     </section>
</article>
</section>

and I have the following CSS,

.the-team {
  width: 443px;
  float: left;
  overflow: hidden;
  position: relative; }
  .the-team .biography {
    width: 313px;
    position: absolute;
    top: 0px;
    left: 124px; }
    .the-team .biography p {
      margin: 0px 0px 10px 0px; }

however my overflow is hidden in the section with all the all content when it should not, how can I stop this/

As soon as you position the content absolutely you remove it from the flow of the parent element. This leads the parent to not use it when calculating it's height. Since it is set to not showing the overflow, everything that is outside its box wil be clipped off. Do you have a specific reason for positioning the content absolutely?

In which Browser you are testing this. I have checked it on my firefox and it works fine. The overflow property is working fine.