Adding float:left to div makes child link not clickable

Question

I know this question was asked at least once before and I have read the other answers. They helped me bypass this problem (there are at least two tricks for this), but what I am asking here is why do I have this problem in my particular setup.

My website is here: webpage

Scroll towards the bottom and you'll see a div (class "two_third") with tabbed content (it has gray background, you won't miss it). The titles of the three tabs are links (<a> elements), but they're no longer clickable. The problem disappears when I remove "float:left" from the div that's immediately to the right (the one with the title "Package content", class "one_third").

What I suspect so far is that "one_third" overlaps with and adds some form of layer over "two-third", thus making links inside "two_third" become unclickable. But this is totally speculation and I have no idea why there would be any overlap, since there's enough space for the two divs to live side by side without any conflicts.

Kindly appreciate your suggestions

Answer 1

You have a DIV <div class="horizotal_break clearfix"></div>. That is on top of the two_third DIV. You can't select text from two_third either. If you remove position:relative; from #content .horizotal_break it should be working fine.