Problema com alinhamento vertical

[Marsal Correia Lima 1]

Olá pessoas! estou com um problema sobre alinhamento vertical, ou melhor, posicionamento, ou os dois xD no meu site que estou começando a tirar do photoshop pra html/css, eu sempre resolvo isso com um float right e margin, mas para min fica muita gambiarra, e provavelmente existe um método melhor de fazer isso, já procurei, tentei mas ou fica totalmente o que eu não queria ou não tem efeito. ( www.gamemode.com.br )

[André do Vale 76]

Perceba que suas LI flutuam dentro da UL. Com isto a UL "deixa de existir fisicamente", recebendo dimensões de 0px.

 

Para resolver, basta acrescer na UL um display: inline-block. Com isto, a UL deixará de ocupar uma linha por inteiro (padrão do display block que é natural do elemento), e receberá as dimensões conforme a soma dos filhos.

 

--------------

Edit:

 

No:

 

.header {
width: 100%;
height: auto;
border: 1px solid #CCC;
padding: 18px 50px 18px 50px;
}

Acresça:

 

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

Verá que o box terá 100% de largura, e subtrai automaticamente as medidas de borda e padding.

[Marsal Correia Lima 1]

Funcionou, muiiiiito obrigado! :)