Publicado em 26 de mai.

Colocar div lado a lado

#css #desenvolvimento-frontend #div #html #lado a lado

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;
}

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

kim.y· 26 de mai.

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~· 26 de mai.

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](http://www.maujor.com/tutorial/anti-heroi-css-display-table.php)

Guga Alves· 26 de mai.

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](https://jsfiddle.net/a1b36gva/) Arraste as divisões do site para ver o resultado