Se você quer dizer que deseja que a barra lateral fique no topo da página, começando acima e à direita da barra de navegação, assim ...
... existem duas maneiras fáceis e uma mais difícil que também oferece outras vantagens.
1 position: absolute;
Aqui está a maneira mais fácil e limpa :
- Adicionar
top: 0;
, position: absolute;
ao elemento que as necessidades para sentar-se no topo da página (#beta), e substituir float: right;
com right: 0;
( float: right;
não funcionará com position: absolute;
mas right: 0;
vai neste contexto criar o mesmo efeito)
- Tenha
position: relative;
um elemento que contenha a página inteira (no seu site #container-inner
), e nenhum elemento no meio (então você precisa removê-lo #pagebody
- tentei e ele não quebra nada).
O top: 0;
de um position: absolute;
elemento será baseado no pai mais próximo que possui position: relative;
.
2) margin-top: -XXXpx;
Se, por algum motivo, você precisou position: relative;
da div no meio (não vejo uma razão, mas uma pode surgir), há outra alternativa menos limpa.
A altura da seção nav / header é fixa, para que você saiba quantos pixels acima deseja mover a barra lateral. Portanto, você pode dar à barra lateral ( #beta
) uma margem superior negativa de muitos pixels (como margin-top: -350px;
). O único problema com esse plano é que você precisa ajustar a margem superior se alterar a altura do cabeçalho.
3. Layout primeiro do conteúdo
Por fim, a melhor solução (mas menos simples) seria editar o modelo HTML e mover o elemento #nav para baixo no html, para que fique abaixo do conteúdo da página, como a barra lateral #beta, e coloque uma margem superior em alfa, criando uma lacuna do tamanho da seção #nav do cabeçalho, faça o elemento #nav e a barra lateral #beta position: absolute;
e top: 0;
(verificando position: relative;
s como acima) e verifique se #nav é exatamente o tamanho certo para preencher o buraco.
Em geral, é melhor, sempre que possível, ter elementos sem conteúdo abaixo do conteúdo principal no HTML - isso significa que as pessoas com leitores de tela ouvem o conteúdo interessante para o qual vieram antes da lista de links de onde ir a seguir, e alguns mecanismos de pesquisa dão mais peso aos termos anteriores da marcação (tenho certeza de que isso ainda é verdade).
Para mais informações, veja um artigo simples sobre os primeiros layouts de conteúdo e um exemplo no contexto de designs 'responsivos' que funcionam para dispositivos móveis e computadores .