Search code examples
cssoverflowanchorclickable

Overflowing anchor not clickable

I have some paragraphs inside a div and some of the words are wrapped in anchor tags. The paragraphs use white-space: nowrap, which causes them to overflow out of the div's boundaries (which is what I intend to do). Problem is, the overflow is visible but anchors are not clickable.

This is probably by design, but still, does anyone know of a way to make the overflowing anchors clickable?

Thanks in advance!

Solution

  • It's because of your div#rightBox - it contains another div inside of it, which is like this: <div class="verticalPlaceholder"></div>. To fix this, instead of using a vertical placeholder like this, change the HTML and CSS like so:

    HTML

    <div class="rightBox" id="rightBox">
    <div class="facebookLike" id="like">
        <iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:100px; height:20px;" src="http://www.facebook.com/plugins/like.php?app_id=174634935928464&amp;href=http%3A%2F%2Fgreat-passage.com%2F%3FphotoId%3D113&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=dark&amp;font=arial&amp;height=20"></iframe>
    </div>
    <!-- Deleted verticalPlaceholder div -->
</div>

    CSS

    div.facebookLike {
    bottom: 75px;        /* ADDED */
    display: block;
    margin: 6px 0 0;
    opacity: 0.5;
    position: relative;  /* ADDED */
}