Div lado a lado

Front-end CSS
#1

Boa tarde.

Gostaria de deixar o meu wiki com as divs lado a lado.
Hoje ela está assim:

01.png1232×702 20.2 KB

Gostaria que ficasse mais ou menos nesse estilo igual a este site: http://tableless.com.br/

#2

Olá Arthur, ja experimentou usar bootstrap? Vai te ajudar muito.

O bootstrap é uma biblioteca de css, onde ja trás uma série de classes prontas e responsivas.
Por exemplo: O bootstrap divide a página em 12 colunas, caso você queira dividir a tela em 2 divs com o mesmo tamanho, basta você adicionar a classe “col-md-6” em cada uma delas, ou seja, cada uma delas ocupa 6 espaços ou colunas na tela MD (média), ficando assim:

<div class="row>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
#3

Olá Artur, você pode usar as propriedades float e clear juntas ou apenas inline-block do CSS ou como o Isaac falou, um framework como Bootstrap ou Foudation.

Segue um exemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>Float e Inline-Block</title>
        <style rel="stylesheet" type="text/css">
        .div-float{
        float: left;
        width: 200px;
        height: 100px;
        margin: 1em;
        background-color: #ccc;
        }
        .div-clear {
        clear: left;
        }
        .div-inline {
        display: inline-block;
        width: 200px;
        height: 100px;
        margin: 1em;
        background-color: #ccc;
        }
        </style>
    </head>
    <body>
        <h1>Float</h1>
        <div class="div-float"><p>Div 1</p></div>
        <div class="div-float"><p>Div 2</p></div>
        <div class="div-float"><p>Div 3</p></div>
        <div class="div-float"><p>Div 4</p></div>
        <div class="div-float"><p>Div 5</p></div>
        <div class="div-float"><p>Div 6</p></div>
        <div class="div-float"><p>Div 7</p></div>
        <div class="div-float"><p>Div 8</p></div>
        
        <div class="div-clear"><p>Div Clear (obrigatorio)</p></div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        
        <h1>Inline-Block</h1>
        <div class="div-inline"><p>Div 1</p></div>
        <div class="div-inline"><p>Div 2</p></div>
        <div class="div-inline"><p>Div 3</p></div>
        <div class="div-inline"><p>Div 4</p></div>
        <div class="div-inline"><p>Div 5</p></div>
        <div class="div-inline"><p>Div 6</p></div>
        <div class="div-inline"><p>Div 7</p></div>
        <div class="div-inline"><p>Div 8</p></div>
    </body>
</html>