CSS HTML/CSS ( DIV com Float ) alinhamento de elementos

Matheus Alvares · 2 de maio de 2023

Boa tarde,

Tenho o .html abaixo:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .conteudo {
                width: 1000px;
            }

            .centro{
                background-color: black;
                width: 640px;
                height: 50px;
                float: left;
                margin: 5px;
                color: white;
            }

            .canto{
                background-color: tomato;
                width: 230px;
                height: 50px;
                float: right;
                margin: 5px;
            }

        </style>
    </head>
    <body>
        <div class="conteudo">
            <div class="centro">
                bloco 1
            </div>       
            <div class ="centro">
                bloco 2
            </div>
            <div class="canto">
                bloco 3
            </div>
            <div class="canto">
                bloco 4
            </div>
        </div>
    </body>
</html>