0

I've been having a huge headache trying to figure out why the facebook comments box is floating so high up right under the tabs of the tabbed navigation. I've tried multiple variations of the clearfix for floating elements to no avail, I've figured out that if you remove the jquery elements it works fine... but I'm having trouble pin-pointing the answer

Here's a working link

http://smooth-media.co.uk/clients/4598185/

Many thanks in advance

mskfisher
  • 3,291
  • 4
  • 35
  • 48
James
  • 17
  • 6

2 Answers2

0

I would try adding clear:all to the #tabs div:

#tabs
{
    clear: both;
    height: 28px;
    background-color: #000;
    border-bottom: 1px solid #fff;
}

Or you can try adding it to the fb-comments class:

div.fb-comments {
    clear: both !important;
}
James Johnson
  • 45,496
  • 8
  • 73
  • 110
0

Because of the way you have styled the page you have added a height to the tabs container but still have content inside of it , so this is causing the overlapping error, as the content is larger then the heightset.

For a quick fix just add margin-bottom to the #tabs container and it will move the facebook comments down:

#tabs {
    height: 28px;
    background-color: black;
    border-bottom: 1px solid white;
    margin-bottom: 100px;
}

EDIT

After looking again at your code, what you really should do is add the height and background color to the list rather then the div #tabs

something like this

#tabs ul {
    height: 28px;
    background-color: black;
}

Then your #tabs should look like this

#tabs{
    height: 150px; //Whatever size the whole section should be
}
ojjwood
  • 166
  • 1
  • 4
  • AHH genius.I completely missed this, I had that height set to that particular div as it was initially just a navigation with the content blow it. Thanks very much, I can work with this :) – James Mar 30 '12 at 14:43
  • Ive re-uploaded with the fix :) Thanks very much – James Mar 30 '12 at 14:55