Dúvida em Media Queries

.secao {
    width: 100%;
}

@media (min-width: 600px) {
    .secao {
        width: 50%;
    }
}
@media (min-width: 1000px) {
    .secao {
        width: 33.333%;
    }
}

Quando você declara uma media query o que acontece neste caso, quando a tela tiver um tamanho minimo de 600px ele vai quebrar a largura da secao para 50% só isso que irá mudar o float não vai ser alterado a menos que você sinta a necessidade que ele seja alterado!

quando temos @media (min-width:1000px) ele so está informando o css que apenas a largura da secao irá mudar para 33.333%

Nos @media só é informado o que irá mudar quando atingir aquele criterio

Rodrigo, obrigado pela ajuda mas ainda não consegui entender na prática, por exemplo, se eu deixo com esse trecho que vc mandou a página em uma resolução > 1000px o conteúdo fica todo em uma coluna:

http://imgur.com/ku3Xq5Y

e isso que não entendi sendo que estou definindo a

.secao {
    width: 100%;
}

e se eu coloco o float:left; o layout se ajusta.

Não entendi exatamente sua dúvida, mas para dar uma exclarecida, o media funciona assim

No corpo do seu projeto, você define primeiro o css que será padrão para TODAS as resoluções ex :

.secao { float:left; }

Daí, quando você aplica um media, você está assumindo que naquela resolução seu item terá tanto o float:left (que foi herdado) quanto o item do media ex: @media (min-width:600px) { .secao { width:50%; } } Assim, o seu .secao terá float left sempre, e no caso, quando a tela atingir 600px de largura ele terá também o width de 50%, e caso você não defina mais medias, dessa resolução em diante ele sempre terá o 50% de largura, pois não tem um max-width (não que precise em todos os projetos ou resoluções) setado.

No seu caso, o .secao tem width de 100% para telas menores a 600px, e quando atinge 600px, ele passa a ter 50%, e quando atinge 1000px, passa a ter 33%.

.secao { width: 100%; }

@media (min-width: 600px) and (max-width: 999px) { .secao { width: 50%; } } @media (min-width: 1000px) { .secao { width: 33.333%; } }

Uma sugestão para seu código é utilizar o max-width, pois uma regra poderá sobrescrever a outra.

A regra principal fora do media query deve ficar antes das regras de media query. O float:left nao precisa ser chamado nas medias pois ja é chamado no principal e você não sobrescreveu posicionamento.

Teste desta forma e veja o resultado.

Posta o codigo completo em algum lugar! acho que voce esta colocando a div dentro de outra div!

Rodrigo, achei onde estava errando, eu estava repetindo uma .secao e nela tinha um float 'a mais'. Mas consegui tirar minha dúvida.

Obrigado e peço desculpas pelo erro aqui no código.

Abraços!