Criando um Sidebar Duplo sem erro

[D-D 1]

Olá, Galera da WebCheats, criei esse tutorial porque antigamente tinha muitos problemas em layouts que eu criava na parte da sidebar ela sempre ficava uma do lado da outra mas depois eu aprendi e acho que tem muitas pessoas com este tipo de problema ;) Então Vamos Lá!

HTML

 

O Código é Bem Simples

 

<div id="sidebar">
<div class="sidebar-widget"><h2>Sidebar</h2><p class="widget">Alguma Coisa!</p></div>
<br>
<div class="sidebar-widget"><h2>Sidebar</h2><p class="widget">Alguma Coisa!</p></div>

</div>

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

Esse é o Código da Sidebar se quiser 500 dessa terá que duplicar 500 vezes! rs.

 

CSS

A Parte mais importante!

 

#sidebar{
float:left;
overflow: auto;
width:220px;
}


.sidebar-widget{
background: #fff;
overflow:auto;
border:1px solid black;
margin-top:5px;
}


.sidebar-widget h2{
border-bottom: 1px solid black;
text-align:center;
background: rgb(0, 139, 84);
color:#fff;
}

 

Créditos:

 

David Wellington (Eu)

[Renata 4]

Coloca um "text-align: center;" na classe .sidebar-widget também, assim ambos ficam centralizados.

Ou melhor, crie uma terceira classe e jogue esse alinhamento dentro dela.

[D-D 1]

Não Achei Necessário fazer isso, mas obrigado pela dica!

 

Até.