baum
baum

Reputation: 1029

Displaying absolute div below floating element

I am working on a website — a portfolio of my work. On the main page, I have a grid of images; each image is a link to the page for that project.

My issue now is the mouse-hover description text. I want a short description to appear below the image when the user hovers over it.

JSFiddle: http://jsfiddle.net/6crL7df7/

The issue I am having is how I can get the description to appear directly beneath the image. In the prototype, I have manually set bottom: -50px;, but this needs to be adjusted for different amounts of text. I would like the top of the div to automatically align with the bottom of its image. I saw some answers saying that bottom: 0; would work, but it didn't for me.

The image itself is float: left; while the description is position: absolute;; the div that contains them both is both float: left; and position: relative;.

I will gladly take any suggestions to get this to work.

Upvotes: 1

Views: 597

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

I would make the following adjustment to your CSS rule:

div.description {
    color: black;
    background-color: white;
    font-size: small;

    padding: 5px;
    border: 1px solid black;
    border-radius: 0 0 5px 5px;

    position: absolute;
    top: 100%; /* set top to be bottom edge of parent block */
    margin-top: -5px; /* adjust as needed */
    z-index: 1;

    visibility: hidden;

}

Specity the top offset to position the description block below the bottom edge of the parent block, and then use margin-top to control the white space (use a negative margin is so needed).

Note that this is essentially the same as an earlier posted solution.

Upvotes: 1

Hashem Qolami
Hashem Qolami

Reputation: 99474

Spec from W3C:

bottom specifies how far a box's bottom margin edge is offset above the bottom of the box's containing block.

top property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block.

Instead of bottom, use top property with a value equal or bigger than 100%.

Updated Demo

div.description {
    /* other declarations... */
    position: absolute;
    top: 110%; /* Anything >= 100% */
}

Upvotes: 2

Related Questions