is there any error in this code that I did, "leaving the page up"

1

The code itself, that's right, but when I put it in one, it looks like the content stays up, leaving the next components up

I need to find out the error:

.thumb {
    width:33%;
    height:auto;
    text-align:center;
    float:left;
}
@media screen and (max-width:800px) {
    .thumb {
        float: none;
        text-align:center;
        vertical-align:middle;
        width: 100%;
        width:auto;
    }
}

And I use this way to keep it aligned:

<div class="thumb">
    <img src="images/image" alt="" title=""/>
    <h3>TESTE</h3>
    <p>TESTE</p>
</div>

there is jsFiddle as requested: new jsFiddle

At first it seems to be all right, but when you resize the jsFiddle screen, you can see the error

I really need to figure this out !! Can someone help me?

    
asked by anonymous 17.09.2016 / 21:24

1 answer

1

Instead of float: left; and float: none; you can use display: block; and display: inline-block; and avoid the side effects that float generates.

It would look like this: link

.thumb {
    width: 33%;
    height: auto;
    text-align: center;
    float: left;
}

@media screen and (max-width:800px) {
    .thumb {
        float: none;
        text-align: center;
        vertical-align: middle;
        width: 100%;
        width: auto;
    }
}
    
17.09.2016 / 21:48