Colocar div lado a lado

aslivs · Maio 26, 2018

Olá pessoal. Gostaria se saber como poderia colocar a div "menu" logo a abaixo da div "banner" e a div "corpo" ao lado de ambas, como está na imagem. Logo abaixo, a div "rodapé". Se puderem me ajudar, agradeceria muito :)

#banner{
    width:320px;
    height:320px;
    background-color: #E4D486;
}

#menu{
    height: 300px;
    width: 320px;
    border-width: medium;
    border-color: #F3E938;
    border-style: dotted;
}

#corpo {
    width: 40%;
    height:360px;
    background-color: yellow;
}

#rodape {
    width: 100%;
    height: 30px;
    background-color: black;
}

kim.y · Maio 26, 2018

Com bootstrap seria assim:

Spoiler


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <!--Criação de uma row principal-->
        <div class="row">
                <!--Criação da coluna da esquerda-->
                <div class="col-sm-4" style="background-color:lavender; height: 300px;">
                        <!--Criação da row de cima-->
                        <div class="row">
                                <div class="col-sm-12" style="background-color:blue; height: 150px;">.col-sm-4</div>
                        </div>
                        
                        <!--Criação da row debaixo-->
                        <div class="row">
                                <div class="col-sm-12" style="background-color:red; height: 150px;">.col-sm-4</div>
                        </div>
                </div>
                <!--Fim Criação da coluna da esquerda-->

                <!--Criação da coluna da direita-->
                <div class="col-sm-8" style="background-color:lavenderblush; height: 300px;">.col-sm-4</div>
                <!--Fim Criação da coluna da direita-->
        </div>
        <!--Fim Criação de uma row principal-->
</body>
</html>

Sem bootstrap só com CSS você vai precisar do display:inline-block;

Boa sorte.

Omar~ · Maio 26, 2018

div banner e menu entram dentro de uma div com propriedade float left a div corpo recebe a propriedade flot left.

abaixo delas entra uma div sem conteúdo com a pripiedade clear both

Então entra o rodape

<style>
  .flt {float: left}
</style>

<div class="flt">
  <div id="banner"></div>
  <div id="menu"></div>
</div>

<div class="flt">
  <div id="corpo"></div>
</div>

<div style="clear: both"></div>

<div id="rodape"></div>

O restante das propriedades, personalize da jeito que bem desejar.

Outra forma de posicionar elementos em linha é através de display(inline-block/table-cell) Para essas declarações sugiro que dê uma lida nesse artigo pois a explicação disso ficou ótima: http://www.maujor.com/tutorial/anti-heroi-css-display-table.php

Guga Alves · Maio 26, 2018

Usando css FLEX, para conteúdo responsivo:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titulo</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        color: #363636;
    }
    
    body, html{
        width: 100%;
        height: 100%;
        background-color: #bfbfbf;
    }
        
        .container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            
        }
        
        .row {
            width: 100%;
            display: flex;
            flex-direction: row;
        }
        
        .col-content {
            width: 320px;
            height: 640px;
        }
        
        .col {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 320px;
            color: #fff;
        }
        
        .item-2 {
            background-color: #4bacc6;
        }
        .item-3 {
            background-color: #f79646;
        }
        
        .col-section {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 640px;
            background-color: #002060;
            color: #fff;
        }
        
        .footer {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #c0504d;
            text-align: center;
            color: #fff;
        }
</style>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-content">
            <div class="col item-2">
                BANNER
            </div>
            <div class="col item-3">
                MENU
            </div>
        </div>
        <div class="col-section">
            CONTEÚDO
        </div>
    </div>
    <div class="footer">
        RODAPÉ
    </div>
</div>

</body>


</html>

Você pode ver como ficou o Resultado Arraste as divisões do site para ver o resultado

Entrar

Arquivado

Colocar div lado a lado

Recommended Posts

aslivs 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

kim.y 11

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guga Alves 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante