Search code examples
jquerycssxhtmlcss-floatclearfix

Jquery tabbed navigation causing floating issues with elements below

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

Solution

  • 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
}