Home/ Questions/Q 9203603
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T23:30:33+00:00

The best way I can explain this is with a JSFiddle example: http://jsfiddle.net/8tXku/ I’m

  • 0

The best way I can explain this is with a JSFiddle example: http://jsfiddle.net/8tXku/

I’m floating each .project div to the left and using some simple jQuery to make them expand to show a description when clicked, however if you click the first project it will push the third project to the right, because it’s taking up too much space when expanded.

Is there a way to get the third project div to just gracefully move down the page with the expanded content rather than move over to the right?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This may be a dirty solution but its works perfectly.

    Giving the .project-description a position:absolute; will allow it to .slideDown() without affecting the surrounding divs, yet some other tweaks had to be made.

    I added position:relative; to .project so that each .project-description is contained within it.

    Final CSS

    .project {
    width: 250px;
    float: left;
    border: 1px solid #dedede;
    border-radius: 6px;
    -webkit-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.4);
    -moz-box-shadow:    0px 0px 20px rgba(50, 50, 50, 0.4);
    box-shadow:         0px 0px 20px rgba(50, 50, 50, 0.4);
    margin-right: 30px;
    margin-bottom: 30px;
position:relative;
}

.project-description {
    padding: 5px;
    font-size: 12px;
    display: none;
    position:absolute;
    background-color:white;
    left:0;
    right:0;
    z-index:99;
}

    Check this out : http://jsfiddle.net/AliBassam/N4U3R/

    UPDATE

    When .project-description contains a big text (obviously) it will be hidden under the bottom div, just add z-index:99; to .project-description

    Check this out: http://jsfiddle.net/AliBassam/pMGDZ/

    • 0