Float: None not working with Media Query - html

Question

I am working on a responsive website, and am having problems with Media Queries.
I have 2 div's, side by side set at 50% width, with float: left and float: right assigned to them respectively. On resize, I wish to remove these floats and display the divs width at 100%.
This is not working however.
Here's my code;
#media only screen and (max-width: 700px) {
#block-half-left, #block-half-right {
float: none;
width: 100%;
}
}
#block-full {
width: 100%;
height: 200px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
}
#block-half-left {
width: 50%;
height: 200px;
background-color: gray;
float: left;
}
#block-half-right {
width: 50%;
height: 200px;
background-color: green;
float: right;
}

Answer 1

The problem is not in the code itself, but its order of appearance.
First of all: You should avoid using !important to fix problems like this, since it is usually just a matter of being more specific on where the styling points.
In this case, however your Media Query is stated first, and after that you're stating the "other" part. CSS (like most languages) is read from top to bottom. If you just move your Media Query to the bottom of your CSS, your problem should be solved.

Answer 2

Specificity is important in CSS.
The simplest way to increase the specificity of your non-floating blocks are to move the rules to the bottom.
E.g:
#block-half-left {
width: 50%;
height: 200px;
background-color: gray;
float: left;
}
#block-half-right {
width: 50%;
height: 200px;
background-color: green;
float: right;
}
#media only screen and (max-width: 700px) {
#block-half-left, #block-half-right {
float: none;
width: 100%;
}
}
More on specificity: https://developer.mozilla.org/en/docs/Web/CSS/Specificity
Furthermore, you'll have a much easier time dealing with specificity in CSS if you use classes, rather than IDs. I.e. .block rather than #block.