Posicionando um DIV antes do DIV anterior

Eu não sou esclarecido quando se trata de HTML / CSS.

Eu uso o Typepad no meu blog, e isso me limita bastante.

Existem quatro divs.

<div id="container-inner">

  <div id="nav"></div>
  <div id="pagebody">
    <div id="pagebody-inner">
      <div id="alpha"></div>
      <div id="beta"></div> 
    </div>
  </div>

</div>

Eu preciso que "beta" apareça no tipo à direita da página, à direita de "nav" e antes de "alpha".

O link para o site ao vivo está aqui: http://sarajchipps.com/

Sua ajuda é muito apreciada.

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 .

O posicionamento absoluto fará isso por você.
Tente pedir ao Webmasters SE uma assistência mais completa.

Você pode implementar algum CSS (com base no seu código) - não tenho 100% de certeza do que você tenta alcançar (é tarde aqui, então vou culpar o tempo agora :)) - não estou familiarizado com o typepad, mas em geral -

Talvez isso possa levá-lo ao caminho certo:

#pagebody-inner {
    display:block;
    width:100%; /* or the size you need it to be in relation to nav */
}
/* This will float your div-elements inside pagebody-inner to the right hand side */
#pagebody-inner div {
    display:block;
    float:right;
}

Naturalmente, essas linhas de css precisam ser inseridas no arquivo css do seu site.

Coloquei o código neste site se você quiser brincar com ele - modifique como quiser:
http://jsfiddle.net/SE4Pr/

Você pode usar o posicionamento absoluto (mas lembre-se de posicionar relativamente o pagebody-innerobjeto pai, a menos que esteja absolutamente desconsiderando o fluxo de elementos).

Como alternativa, você pode flutuar ambos alphae betapara a direita. Ou você pode simplesmente trocar a posição de alphae betae flutuar para a esquerda ou torná-los blocos inline.

Acabei de verificar seu site e você precisa fazer algumas alterações.

#alpha{
 float:right;
}
#beta{
 float:left;
}

e adicionar a margem correta à div pode torná-la boa.