Como centralizar e alinhar áreas de sidebar e post

[pheureunanda 0]

Olá, sou nova no fórum e na área de programação web, estou me dedicando a aprender tudo sozinha, só que há uma dúvida minha que eu quebro cabeça até hoje para resolvê-lá, mas até agora não consegui. É que eu quero saber como se centraliza e alinha as áreas de sidebar e post como nessas imagens que eu fiz de exemplo: 

Como eu faço para deixa-las centralizadas e alinhadas uma do lado da outra com a distância que eu determinar? 

 

E na primeira imagem de exemplo: como eu faço para deixar a área de sidebar dividida em blocos de tamanhos iguais um embaixo do outro? 

 

Se alguém puder me ajudar... Estou recorrendo a esse fórum. 

[Omar~ 87]

Unicamente você tem um bloco a esquerda e outro a direita.

Você pode alinhar eles com float por exemplo.

<style>
    .base:after,
    .base:before {content:""; display:table; clear:both}
    .base > .esquerda,
    .base > .direita {display: table-cell; float:left}
    .base > .esquerda,
    .base > .direita {padding:10px}
    
    .base {
        height:600px
    }
    .esquerda {
        width:200px;
        height:inherit
    }
    .direita {
        width:600px;
        height:inherit
    }
    .filho_esquerda {
        width:200px;
        height:140px;
        margin-bottom:10px;
        background:red;
    }
    .filho_direira {
        background:red;
        width:590px;
        height:590px
    }
</style>

<div class="base">
    <div class="esquerda">
        <div class="filho_esquerda">A</div>
        <div class="filho_esquerda">B</div>
        <div class="filho_esquerda">C</div>
        <div class="filho_esquerda">D</div>
    </div>
    <div class="direita">
        <div class="filho_direira"></div>
    </div>
</div>

Porém esse exemplo temos o bloco base que incorpora todos os outros á esquerda do se elemento pai no caso o body.

Para centralizar-lo temos que definir que ele possui uma largura, essa largura deve ser o suficiente para compor o tamanho de todos elementos internos para não causar um overflow. Tendo isso em mente bastar automatizar sua margem exemplo:

.base {
  height:600px;
  width:900px;
  margin:auto
}

 

Outra forma que podemos fazer é dizer que a base possui sua largura automatizada,

E que seus filhos vão cer centrais.

Assim sendo quando esses filhos possuem uma largura fixa ou relativa eles vão centralizar. Então para alinhar-los usamos o inline-block.

Exemplo só mudando o css da questão acima:

.base {
    width:auto;
    text-align:center
}
.esquerda, .direita {
    display:inline-block;
    vertical-align:top
}
.filho_esquerda {
    background:red;
    width:200px;
    height:140px;
    margin-bottom:10px;
}
.filho_direira {
    background:red;
    width:590px;
    height:590px
}

 

Quando se tem a noção que tudo que existe em tela são blocos sobrepondo outros blocos fica muito simples projetar e criar qualquer tipo de layout.