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.
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 are two easy ways, and one more difficult way that gives other advantages too.
position: absolute;Here's the cleanest easy way:
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)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;.
margin-top: -XXXpx;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 edit the HTML template and move the #nav element down in the html so it's below the page content like the #beta sidebar, then, put a big margin-top on alpha, creating a gap the size of your heading #nav section, then make both the #nav element and the #beta sidebar position: absolute; and top: 0; (checking position: relative;s as above), and make sure that #nav is exactly the right size to fill the hole.
It's generally better where possible to have non-content elements below the main content in the HTML - it means that 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 (I'm 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.
Absolute positioning will do it for you.
Try asking on the Webmasters SE for more thorough assistance.
You could implement some CSS (based on your code) - I'm not 100% sure of what you try to achieve (it's late here so I'll blame the clock for now :) ) - I'm neither familiar with typepad, but in general -
Perhaps this can get you on the right track:
#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;
}
These css-lines need of course to be put in the css-file for your site.
I put the code on this site if you want to play around with it - modify as you want:
http://jsfiddle.net/SE4Pr/
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.
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 .
