Float and #media query doesn't seem to work together - css

Question

Here's my CSS:
div.imgbeequick
{
background: url('../img/beequick400-135.png') no-repeat center top;
display: inline-block;
vertical-align: center;
width:45%;
margin:auto;
height:135px;
}
aside
{
padding:5px;
vertical-align: center;
color:black;
float:right;
}
#media screen and (min-width: 1076px)
{
div.imgbeequick
{
width:45%;
}
aside
{
clear: both;
float: right;
vertical-align: center;
}
}
#media screen and (max-width: 1075px)
{
div.imgbeequick
{
width:100%;
}
aside
{
float: none;
width:80%;
margin:auto;
text-align:center;
}
}
The problem is the aside button doesn't float right when I expand the window to more than 1076 px (but it floats if the page size during refresh is more than this size)
Here's a link to the whole page: http://javascript-ninja.fr/beequickcomm/
The aside button contains the input, the div.imgbeequick is the image of the bee

Answer 1

Replace float:right; in the aside class with display:inline-table
#media screen and (min-width: 1076px)
{
div.imgbeequick
{
width:45%;
}
aside
{
clear: both;
display: inline-table;
}
}
Oh, and one more thing...there's no such thing as vertical-align: center; the value you meant was propably 'middle', but it is not necessary in your case.
The inline-table value does not have a direct mapping in HTML. It
behaves like a HTML element, but as an inline box, rather than
a block-level box. Inside the table box is a block-level context. (source)

Answer 2

May be, this changes helps you to get what you need:
#media screen and (min-width: 1076px) {
div.imgbeequick {
width:45%;
float: left; /* ADDED */
}
aside {
/*clear: both; REMOVED */
float: right;
vertical-align: center;
}
}
#media screen and (max-width: 1075px) {
div.imgbeequick {
width:100%;
float: none; /* ADDED */
}
aside {
float: none;
width:80%;
margin:auto;
text-align:center;
}
}