0

Estou tentando fazer a box2 ficar com float:left e a box1 com float:right mas mesmo setando as opções o HTML não reproduz o que preciso. Isso precisa acontecer sem usar grid ou flexbox ou qualquer outra coisa além de css3 básico e html... Sou iniciante ^^ e preciso desse fundamento para continuar aprendendo responsividade com código legado...

@charset "utf-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  width: 100vw;
}

.container {
  float: left;
  width: 100%;
  height: auto;
  padding: .5%;
  background-color: sienna;
}

.box1 {
  float: right;
  width: 100%;
  height: 200px;
  background-color: wheat;
}

.box2 {
  float: left;
  width: 100%;
  height: 200px;
  background-color: rgb(145, 247, 208);
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Teste 1 - Responsividade com media queries </title>
  <link rel="stylesheet" href="styleMobile_v1.css">
</head>

<body>
  <main>
    <div class="box-noticia">
      <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
      </div>

    </div>
  </main>
</body>

</html>

2
  • 1
    Teria como você reduzir seu código a um Exemplo Mínimo, Completo e Verificável? É mais fácil analisar somente o que deu errado do que termos que filtrar tudo o que tem no seu código não relacionado ao problema. 25/07/2021 às 22:37
  • Feito ^^ Desculpa ainda não sei me comunicar aqui direito... 26/07/2021 às 0:34

2 Respostas 2

1

Coloca o width do box1 e box2 em 50%, com os 2 em 100% complica :)

3
  • Mas preciso q uma fique embaixo da outra ^^ 26/07/2021 às 13:05
  • Nesse caso, coloque os 2 em float right ou left, e coloque width: 51%, se não ficar do jeito que deseja, acho que terá que usar o flex ou o grid. 26/07/2021 às 16:24
  • Consegui pessoal. A solução foi fazer uma query e "divs" separadas para cada dispositivo onde no html eu setava box1 e box2, nesta ordem para desktop, e para mobile fazia box 2 e box 1, nesta ordem, chamando no CSS uma query para cada dispositivo e suas respectivas resoluções. Enquanto uma estava ativa com "display: block" a outra recebia "display: none". 27/07/2021 às 1:02
0

Voê pode fazer mais do que uma maneira, usando o seu codigo basta meter as width das box's para 50%. Outra opção é usar o display: flex e o flex-flow:row. Com o flex-flow, pode meter os elementos a responderem como coluna se quiser com flex-flow: column Deixei exemplo em baixo.

@charset "utf-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  width: 100vw;
}

.container {
  display: flex;
  flex-flow: row;
  width: 100%;
  height: auto;
  padding: .5%;
  background-color: sienna;
}

.box1 {
  width: 50%;
  height: 200px;
  background-color: wheat;
}

.box2 {
  width: 50%;
  height: 200px;
  background-color: rgb(145, 247, 208);
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Teste 1 - Responsividade com media queries </title>
  <link rel="stylesheet" href="styleMobile_v1.css">
</head>

<body>
  <main>
    <div class="box-noticia">
      <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
      </div>

    </div>
  </main>
</body>

</html>

3
  • De certa forma entendi... Mas por enquanto não posso usar flexbox amigo... Preciso dominar uso de floats e códigos legados... 26/07/2021 às 13:06
  • Então basta meter as width para 50% de cada div. 27/07/2021 às 8:42
  • preciso que fique uma embaixo da outra mas na ordem invertida... de toda forma já consegui amigo... obg pela atenção ^^ 29/07/2021 às 2:17

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 .