Question

tmbeta.tumblr.com

See the notes count under the posts? The css is ok but somehow float:right is not responsive.

To see what I’m talking about go to http://responsivepx.com/?tmbeta.tumblr.com#500×497 and try making the window smaller than 480px. There’s a small gap underneath, it can be fixed by refreshing the page but I’m looking for a stable solution.

I tried clearing the float but it doesn’t seem to have any effect.

Here’s the code, as I was saying, what’s causing the problem is float:right.

    .notecount {
                    float: right;
                color: #fff;
                font-size: .8em;
                font-weight: bold;
                text-shadow: 0 1px 0 #000;
                border-bottom: solid #666666 1px;
                padding: .3em .8em 0 2.5em;
                -webkit-border-radius: 15px;
                   -moz-border-radius: 15px;
                        border-radius: 15px;
                -webkit-box-shadow: inset 0px 3px 3px 0px #23262c;
                box-shadow: inset 0px 3px 3px 0px #23262c;
                background: #393939 url(http://dl.dropbox.com/u/13823768/masonry/img/notes.png) no-repeat 10px 65% ;
vertical-align: middle;
            }

Answer 1

Fixed this by adding float:right outside the media query too. Here’s a fiddle.
http://jsfiddle.net/Xkw9T/