Making None float is not working

Question

I have the following form:

  <form id="formFrete" action="?" method="post">
    <input type="hidden" name="acao" value="calculaFrete" />
    <div style="float:left;">
      <label class="labelPequeno">CEP:</label>
      <input pattern="[0-9]{2}[.][0-9]{3}[-][0-9]{3}" type="text" class="typeTextPequeno" id="cep" name="cep" value="<?php echo $cep; ?>" required />
    </div>
    <div style="float:left; width:10px;">&nbsp;</div>
    <div style="float:left;">
      <input type="submit" value="Calcular Frete" class="btnPesquisa" />
      <a href="http://www.buscacep.correios.com.br/sistemas/buscacep/" target="_blank">Não sei o CEP</a> </div>
  </form>

He looks like this:

But when it puts resolutions below 860px including, I would like the botões "Calcular Frete" and the "Não sei o cep", behaved as bloco.

I’m doing like this:

@media screen and (min-width: 0px) and (max-width:860px) {
 form#formFrete div {
     float:none;
 }
}

Where am I going wrong?

Answer 1

The problem in this case is the precedence of styles defined in different places or forms, I explain how the browser decides which style takes precedence in another answer if you want to confer.

Basically because you have declared inline styles, by using the attribute style that takes precedence higher than styles defined by css your rule is ignored.

The simple solution would be to use !important in your css to force the browser to apply the rules, but the best solution would be not to use the attribute style and do everything by css

form#formFrete div {
    float:left;
}    

@media screen and (min-width: 0px) and (max-width:860px) {
    form#formFrete div {
        float:none;
    }
}

This way I could remove the float:left that was inline in html, and as the css rules are applied in the order they are in the file it will first apply the float:left, but if the screen is less than 860px it will replace the rule by float:none