How Can I Set Button Below Image?

I have one little problem: How can I set button below image? This is my css code: .news_img{ margin:0 20 0 20; float:left; } .trailer_button{ z-index:999; float:left;

Solution 1:

This should be your HTML code:

<div class="movie_box">
    <h3 class="h3">'.$movies['name'].'</h3>'
    <div class="buttonimg">
        <div class="news_img">
            <img src="'.$movies['cover'].'"/>
            <br/>
            <button class="trailer_button" type="button">Trailer</button>    
        </div>
    </div>
</div>

Inserting the button in to the image div, and using
to create a new line, just under the picture and put the button there.

jsFiddle:http://jsfiddle.net/1a0mzqz0/

Solution 2:

Either the <br/> Mor Haviv suggested, or just remove the floats:

Here's a running Example Fiddle

.news_img{
  margin:0 20 0 20;

}
.trailer_button{
    z-index:999;

    margin:1 20 -20 20;
    width:181px;
    border-radius:10px;
}
.buttonimg{
    width:auto;
    height:auto;
}