CSS div sobrepondo outra div

MarkZ029 · 30 de setembro de 2018

Entao pessoa, eu estou criando um site e uma das divs esta sobrepondo a outra quando eu reduzo o tamanho da tela do site, era pra ela ir pra baixo, mas ela fica ou em cima da anterior ou dentro, e ela teria que ficar em baixo, em ultimo lugar...

<!DOCTYPE html>
<html>
<head>
    <title>TESTE</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/estilo.css">

</head>
<body>
    <div class="container-fluid">

        <div class="row">
            <div id="cabecalho" class="col-12"></div>
        </div>

        <div id="fundo-em cima" class="row">
            <div id="fundo-em cima-esquerda" class="col-md-6 col-xs-12"></div>
            <div id="fundo-em cima-direita" class="col-md-6 d-none d-md-block"></div>
        </div>

        <div id="fundo-meio" class="row">
            <div id="fundo-meio-esquerda" class="col-md-6 col-xs-12"></div>
            <div id="fundo-meio-direita" class="col-md-6 col-xs-6"></div>
        </div>

        <div class="row">

            <div id="fundo-baixo" class="col-md-12 col-xs-10"></div>

        </div>
    </div>

</body>
</html>



#cabecalho{
    background: #98FB98;
    height: 100px;
}

#fundo-em cima{
    background: #808000;
}

#fundo-meio{
    background: #D2B48C;
    height: 200px;
}

#fundo-baixo{
    background: #D2B48C;
    height: 200px;
}

#fundo-em cima-esquerda{
    background: #4B0082;
    min-height: 200px;
}

#fundo-em cima-direita{
    background: #FF00FF;
    min-height: 200px;
}

#fundo-meio-esquerda{
    background: #800000;
    min-height: 200px;
}

#fundo-meio-direita{
    background: #FF4500;
    min-height: 200px;
}

#fundo-baixo{
    background: #D2B48C;
    height: 100px;
    
}

TESTE.rar

makotsunami · 1 de outubro de 2018

Pelo que você postou não dá pra saber bem o problema que você está enfrentando.

Um fato é: o código abaixo deve ser junto, sem espaços.

/**ERRADO*/
#fundo-em cima{
    background: #808000;
}
/**CERTO*/
#fundo-em-cima{
    background: #808000;
}

Seria esse o problema?

MarkZ029 · 1 de outubro de 2018

Não sei porque saiu com esse erro na postagem, porque aqui no codigo esta junto o "em cima"... Eu postei o arquivo em .rar, se quiser testar

adicionado 5 minutos depois

Quando você diminui a tela do navegador era pra se ajustar, tanto que o quadrado rosa some, e o laranja era pra ficar em cima daquele marrom claro, e o marrom embaixo do laranja, porém ele fica em cima.. (Provavelmente saiu dquele jeito porque no código eu escrevi errado(Escrevi em cima) e aqui no site ele corrigiu automático.