Positioning a DIV before the previous DIV [closed]

Question

I'm not savvy when it comes to HTML/CSS.

I use Typepad for my blog, and that limits me a lot.

There are four 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>

I need "beta" to appear on the type right of the page, to the right of "nav" and before "alpha".

The link to the live site is here: http://sarajchipps.com/

Your help is greatly appreciated.

Answer 1

We don't normally do HTML/CSS coding questions here since they're so well represented on our sister (aunt?) site stackoverflow.com. No point having competing sites in the same family, so I've voted to close. But maybe there's a case to be made that simple layout-focussed questions like this fit better here, so here's an answer anyway.

---

If you mean, you want the sidebar to sit at the very top of the page, starting above and to the right of the nav bar, like this...

...there's two easy ways, and one more difficult way that gives other advantages too.

Here's the cleanest easy way:

• Add top: 0;, position: absolute; to the element that needs to sit at the top of the page (#beta), and replace float: right; with right: 0; (float: right; won't work with position: absolute; but right: 0; will in this context create the same effect)
• Have position: relative; on an element that contains the whole page (on your site, that's #container-inner), and no elements in between (so you need to remove it from #pagebody - tried it and it doesn't break anything).

The top: 0; of a position: absolute; element will be based on the nearest parent that has position: relative;.

---

If for some reason you did need position: relative; on the div in the middle (I can't see a reason, but one might emerge), there's another less clean alternative.

The height of the nav / header section is fixed, so you know how many pixels up you want to move the sidebar. So, you can just give the sidebar (#beta) a negative top margin of that many pixels (like margin-top: -350px;). The only problem with this plan is, you need to adjust that margin-top if you change the height of the header.

---

Finally, the best (but least simple) solution would be to move the #nav element down in the html so it's below the page content, put a big margin-top on alpha creating a #nav-sized hole, then make the nav element position: absolute; and top: 0; and exactly the right size to fill the hole. It's generally better where possible to have nav elements below content in the HTML - people with screenreaders hear the interesting content they came for before the list of links of where to go next, and some search engines give greater weight to terms earlier in the markup (pretty sure this is still true).

For more reading, here's a simple article on content first layouts, and here's an example in the context of 'responsive' designs that work for mobile and desktop.

Answer 2

Absolute positioning will do it for you.
Try asking on the Webmasters SE for more thorough assistance.

Answer 3

You could use absolute positioning (but remember to relatively position the parent pagebody-inner object unless you're absolutely disregarding the flow of elements).

Alternatively, you could float both alpha and beta to the right. Or you can just swap the position of alpha and beta and float left or make them inline blocks.

Answer 4

I just checked out your site and you need to make a couple of changes.

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

and adding the correct margin to the div can make it look good .