0

Tenho o componente1 e o componente2 segue o exemplo:

body {
  margin: 0;
}

.componente1 {
  width:250px;
  float: left;
  background-color: green;
  height: 340px;
}

.componente2 {
  width:250px;
  height: 340px;
  float:left ;
  background-color: red;
}

@media only screen and (max-width: 601px) {
  .componente1 {
margin-top: 345px;

  }
  .componente2 {
margin-top:-345px;

  }

}
<div>
  <div class="componente1">
    
  </div>
  <div class="componente2">
    
  </div>
</div>

Objetivo e fazer o componente2 ficar acima do componente1 em resolução abaixo dos 600px de largura. Esse exemplo funciona no IE e Chrome, porém no Firefox fica uns 30px sobrescrevendo o componente1.

Lembrando que a resposta tem que ser compatível com os principais veículos de navegação.

4
  • Você já tentou usar porcentagem ao invés de pixel? 3/12/2014 às 17:15
  • Já mas fico muito incompatível mas tenta ai as vezes você consegue fazer certo. 3/12/2014 às 17:22
  • Pode colocar um exemplo de como quer que fique? para mim dá igual no Chrome e FF... jsfiddle.net/cwdrhpke/show
    – Sergio
    3/12/2014 às 17:23
  • Troca o "@media only screen and (max-width: 601px)" por "@media only screen and (min-width: 601px)", eu uso muito isso e nao tenho problema e sempre uso o "min" 3/12/2014 às 17:33

2 Respostas 2

1

O maior problema do seu código é que você não resetou as propriedades principais das coisas, aí o resultado é imprevisível.

Veja os pontos importantes acrescentados aqui:

  • reset na margem, padding, e position:relative nos divs e na pagina toda;

  • box-sizing para fazer com que o tamanho em pixels seja previsível, independente de padding, borda, e outros detalhes

  • clear:both pra quebrar o float em linhas separadas;

  • uso de top em vez de margin;

  • se quiser, ponha width:100% dentro deles, pra pegar a largura toda.

body, html, div {
  position: relative;
  padding: 0;
  margin: 0;
}

.componente1, .componente2 {
  box-sizing: border-box;
}

.componente1 {
  width:250px;
  float: left;
  background-color: green;
  height: 340px;
}

.componente2 {
  width:250px;
  height: 340px;
  float:left;
  background-color: red;
}

/* colocar media query daqui pra baixo */

.componente1 {
  top: 340px;
  clear:both;
}

.componente2 {
  top: -340px;
  clear:both;
}
<div>
  <div class="componente1">
    C 1
  </div>
  <div class="componente2">
    C 2
  </div>
</div>

2
  • O problema ainda persiste o clear:both; não esta pegando, existe alguma forma de subir o componente2 sem o margin-top? 3/12/2014 às 18:21
  • Mas eu nao usei margin top. E tem que ver o resto dos problemas na pagina que vc está usando, pq o problema pode estar em outra parte.
    – Largato
    3/12/2014 às 18:25
0

O problema de incompatibilidade com navegadores foi solucionado com isso:

http://www.devmedia.com.br/como-utilizar-a-tecnica-css-reset/26797

Eu estou deixando o link e não o código pra dar um credito para quem posto.

1
  • Só uma observação. Já tinha até comentado na 1a linha da minha resposta que o problema era falta de resetar as propriedades. Obviamente que pra resetar todas, tem que saber quais estão sendo usadas (dá pra usar esses resets prontos, mas geralmente vc acaba resetando até o que nao precisa, carregando desnecessariamente o CSS).
    – Largato
    4/12/2014 às 0:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .