Position my sidebar next to my content

I run a simple blog on tumblr made in XHTML.

Now as you can see it has a single column (800px wide) that is centered in the browser. So the blog content stays in the center no matter how you scale the browser window. What I would like to do now is add a small sidebar to the right of this main column.

Now, I have managed to create a sidebar myself but if you scroll to the bottom of my blog, you can see that the sidebar is below the content and not next to it. How to I get it next to my content? I must say, I know next to nothing about coding and editing the CSS, everything I made so far is by customizing an existing theme. So I hope someone can help me out!

Sorry for extensively explaining it, I just want to make myself perfectly clear so someone can help. And to be sure, I've added a photoshopped screenshot so you can see the result that I'm looking for.

Example screenshot:

http://img94.imageshack.us/img94/5103/whatiwanto.jpg

Below is the code:

NOTE: you can find the placing (or CSS) of the sidebar under #rightside and the actual content of the sidebar at the bottom of the code under <div id="rightside">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>


<!--
    "Quite Big" theme designed by

                                       |             |    |           
  _` |  _ \  _ \   __| _` |  _ \    _` | |   | __ \  |  / |  _ \ |   |
 (   |  __/ (   | |   (   |  __/   (   | |   | |   |   <  |  __/ |   |
\__, |\___|\___/ _|  \__, |\___|  \__,_|\__,_|_|  _|_|\_\_|\___|\__, |
|___/                |___/                                      ____/ 


    http://www.tumblr.com/theme/3531
  -->


  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <meta name="color:Background" content="#ffffff"/>
  <meta name="color:Title" content="#000000"/>
  <meta name="color:Text" content="#202020"/>
  <meta name="color:Minor Text" content="#999999"/>
  <meta name="color:Line" content="#EEEEEE"/>
  <meta name="color:Link" content="#49D28D"/>
  <meta name="color:Hover Link" content="#3FB67A"/>
  <meta name="color:audio" content="#000000"/>
<meta name="color:TopLine" content="#eeeeee"/>
<meta name="color:BottomLine" content="#eeeeee"/>
<meta name="if:CenterAll" content="0"/>




<meta name="font:Heading" content="Futura"/>

<meta name="image:Header" content="0">

<meta name="if:Show notes on permalink pages" content="1">

<meta name="if:Show Album Art on Audio Posts" content="1" />
<meta name="if:Ask Enabled" content="0" />

  <meta name="font:Description" content="Georgia"/>
  <meta name="font:Body" content="Georgia"/>

<meta name="text:Disqus Shortname" content=""/>

  <title>{Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}

  <link rel="shortcut icon" href="{Favicon}"/>
  <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>

  <style type="text/css">
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,dl,dt,dd,ul,ol,li,th,td,form,fieldset,legend,input,textarea, {margin:0;padding:0;}
html{font-size:14px;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6{font-size:14px;font-weight:normal; padding:5px 0;}
abbr,acronym{border:0;}

body {background:{color:Background}; color:{color:Text}; font:1em/1.5 {font:Body}; margin:0 0 0 0;}

h1, h3 {font-family:{font:Heading};}
pre,code {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}

a:link, a:visited {color:{color:Link}; text-decoration:none;}
a:hover, a:active {color:{color:Hover Link};}



#header {color:{color:Minor Text}; position:relative; margin:-49 auto; padding-top:25px; width:875px;}

#header h1 {color:{color:Title}; font-weight:bold; text-align:center; font-size:80px; line-height:65px; margin-bottom:15px; margin-top:-30px;
            letter-spacing:-.05em;}
#header h1 a:link, #header h1 a:visited {color:{color:Title}; display:block;}
#header h1 a:hover, #header h1 a:active {color:{color:Hover Link};}
#description {font-family:{font:Description}; font-size:12px; text-align:center; line-height:16px; margin-bottom:20px; margin-top:-5px;}
#header form {margin-bottom:20px;}
#header form input {width:630px;}
#header ul {margin:0 -0.25em 1.5em;}
#header li {list-style:none; text-transform:lowercase;}
#header li a {background:{color:Background}; display:block; padding:0 0.25em;
              text-decoration:none;}
#header li a:hover {background:none;}



#container {background-color:{color:Container}; margin:30px auto; padding-top:5px; width:875px}

#rightside {
    margin: 0px auto;
    position: relative;
    left: 750px;
    padding-top:0px;
    width:240px;}







#posts {background-color:{color:Background}; border-top:1px solid {color:TopLine}; 
        border-bottom:1px solid {color:BottomLine}; margin:0px; padding:0px; {block:IfCenterAll}text-align:center;{/block:IfCenterAll}font-size:14px;}


#posts .post {list-style:none; padding-bottom:10px; max-width:800px;
              clear:both;}
#posts .content {color:{color:Text}; padding:0; margin-left:0px;}

#footer {margin:0 auto; max-width:800px; padding-bottom:30px;}
#pagination p {font-size:14px; min-width:150px; line-height:16px; margin:0 0 10px;
               white-space:nowrap;}
#pagination p.back {display:inline; text-align:right; float:right; margin-left:20px;}
#pagination p.forward {display:inline; float:left; margin-right:1.5em;}
#pagination a {font-style:italic;}
#pagination .page {text-align:center; font:12px {font:Body};
                   margin-bottom:20px; text-transform:lowercase;}
#credits {clear:both; display:inline; text-align:center; font-size:12px; color:{color:Minor Text}; margin:0; padding:1.5em 0;}
#footer a:hover, #footer a:active {text-decoration:none;}

p {margin-bottom:25px;}
form .submit {height:0; overflow:hidden; display:block;}

.meta {float:left; clear:left; width:65px; {block:IfCenterAll}width:800px{/block:IfCenterAll}; font-size:14px; text-align:left; line-height:10px;}
.meta h2 {font-size:14px; margin-bottom:5px; border-bottom:1px solid {color:Line};}
.meta h2 a {text-decoration:none; display:block; padding:0px 0px;}
.meta h2 a:hover {background:none;}
.meta p {color:{color:Minor Text}; font-style:italic; margin:0 0 0 1em;
         text-indent:-0.75em; text-transform:lowercase;}
p.meta {color:{color:Minor Text}; font-style:italic; margin:0;
        width:150px; text-indent:-0.75em; text-transform:lowercase;}
.meta a {font-style:normal; white-space:nowrap;}
.meta .plays {font-weight:bold; font-style:normal;}

h3 {font-size:16px; line-height:20px; padding-bottom:10px; font-weight:bold;}

.content a {border-bottom:1px solid {color:Line};}
.content a:hover {border-bottom-width:2px;}
.content .photo a {border:none !important;}
.content ul, .content ol {margin:20px;}
.content ul li {list-style:square;}

blockquote {margin:0 20px 20px; font-style:italic;}
blockquote i, blockquote em, blockquote [lang="ja"] {font-style:normal;}
pre, code {font-size:14px; line-height:12px;}
pre {background:#e1e1e1; margin:15px; padding:10px;
     overflow-x:auto;}
pre code {display:block;}
pre i, code i {font-style:normal; color:{color:Minor Text};}

ins {text-decoration:none; font-style:italic;}
blockquote ins, em ins, ins em {font-style:normal;}

abbr, acronym, .caps {font-size:12px; letter-spacing:0.1em; word-spacing:0.1em;}
abbr, acronym {text-transform:uppercase;}
.caps {text-transform:uppercase;}


.text, .caption {margin-bottom:20px;}
.post img, .post object, .post embed {max-width:100%;}

.link-post h3 {padding:0; margin-bottom:15px;}

.photo-post .photo, .video-post .video {margin-bottom:20px; margin-top:20px; }

.quote-post .quote {font-family:{font:Body};}
.quote-post .source, .cite
  {float:right; margin:0 40px 20px 50px; text-indent:-1.5em;}
.quote-post .source a:first-child, .cite
  {letter-spacing:0;}
.short-quote .quote, .medium-quote .quote
  {font-size:14px; line-height:16px; margin:20px 40px 20px 0;}
.long-quote .quote {margin:20px;}

.audio-post .audio {height:27px; background: {color:audio}; 
    display: block; 
    margin-bottom: 5px; 
    padding: 0px;}


.audio-post .audio_player {width:auto;}

.chat-post ol {list-style:none; margin:15px 0;}
.chat-post li {margin-left:1.5em; text-indent:-1.5em;}
.chat-post .label {font-weight:bold; padding-right:0.125em;}
.chat-post .speaker {font-style:italic;}
.chat-post .speaker2 .label, .chat-post .speaker4 .label,
  .chat-post .speaker6 .label, .chat-post .speaker8 .label
    {color:{color:Minor Text};}
.chat-post .speaker3 .label, .chat-post .speaker4 .label,
  .chat-post .speaker7 .label, .chat-post .speaker8 .label
    {text-transform:uppercase; letter-spacing:0.1em;}
.chat-post .speaker5 .label, .chat-post .speaker6 .label,
  .chat-post .speaker7 .label, .chat-post .speaker8 .label
    {font-family:{font:Heading};}


.day .month {text-transform:uppercase;}
{block:DayPage}.day {font-weight:bold;}{/block:DayPage}

.content.text-post img {
max-width: 100%;
}


.multi {margin-bottom:30px; margin-right:15px; {block:IfCenterAll}margin-right:10px; margin-left:10px;{/block:IfCenterAll};}

.inst {
background-color: #49d28d;
}


.video embed, .video object, .video iframe {width:800px; height:450px;}


#comment {
  font-size: 14px;
  text-align: left;
  line-height: 18px;
  margin: 0px 0px 0px 0px;
}

#comment a {
  text-decoration: none;
  color: {color:Caption};
}

#comment a:hover {
  text-decoration: none;
  color: {color:Link Hover};
}

#dsq-content {
  background: rgba(0, 0, 0, .30);
  background: url('     ');
  padding: 5px 20px 20px 20px;
  margin-top: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;
}





{block:PermalinkPage}



      p.answer_form_container { width: 512px; }

      ol.notes { width: 800px; list-style-type: none; margin:20px auto; padding: 0; }
        ol.notes li.note { background: #F7F7F7; margin: 0 0 0px 0; padding: 0 4px; }
        ol.notes a { color: {color:Links In Notes}; }
        ol.notes img.avatar { display: none; }
        ol.notes blockquote { margin: 0; }
          ol.notes blockquote a { text-decoration: none; }
    {/block:PermalinkPage}






a.install {
        width: 96px;
        height: 20px;
        background: url(http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png);
        display: block;
        position: absolute;
        top: 26px;
        right: 3px;
    }


a {
  outline: none;
}





{CustomCSS}
  </style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/xz44nnc/zNHlmnd4b/jquery.killphotoset.js"></script>
<script>
$(function () {
   $(".html_photoset").killPhotoset({
   photoSize: 1280
  });
});
</script>


<script type="text/javascript">
<!--
function handleThis(formElm)
{
window.location="http://iloveyourvideo.tumblr.com/tagged/"+formElm.number.value+"";
return false;
}
// -->
</script>

</head>
<body>




<div id="container">


<div id="header">
  <a href="/">
        {block:IfHeaderImage}<h1><img src="{image:Header}" class="logo" /></h1>{/block:IfHeaderImage}
        {block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}</a>



  {block:Description}<p id="description">
    {Description}
  </p>{/block:Description}

<p>
{block:IfCenterAll}<center>{/block:IfCenterAll}

{block:Pages} 

<a class="multi" href="{URL}">{Label}</a>

{/block:Pages}


{block:IfAskEnabled}
<a class="multi" href="/ask">{AskLabel}</a>
{block:IfAskEnabled}
{block:IfCenterAll}</center>{/block:IfCenterAll}</p>

</div>



<ol id="posts"><br>
{block:Posts}


<li class="post" id="post{PostID}">

    {block:Text}

 <div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br><br>

    <div class="content text-post">
      {block:Title}<h3><span>{Title}</span></h3>{/block:Title}

      <div class="text">{Body}</div>
    </div>
    {/block:Text}

   {block:Photo}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br>

    <div class="content photo-post">
      <div class="photo">

        {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
        {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
          <img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}">
        {block:IndexPage}</a>{/block:IndexPage}
        {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}

      </div>



      {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
    </div>
    {/block:Photo}


{block:Photoset}

        <div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br>

    <div class="content photo-post">
      <div class="photo">

        {Photoset-500}

      </div>



      {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
    </div>
{/block:Photoset}



    {block:Quote}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br><br>
    <div class="content quote-post {Length}-quote">
      <blockquote class="quote">{Quote}</blockquote>

      {block:Source}<div class="source">&mdash;&#8194;{Source}</div>{/block:Source}
    </div>
    {/block:Quote}

    {block:Link}

<div class="meta">

{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br><br>
    <div class="content link-post">
      <h3 class="link"><a href="{URL}">{Name}</a></h3>

      {block:Description}<div class="caption">{Description}</div>{/block:Description}
    </div>
    {/block:Link}

    {block:Chat}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br><br>

    <div class="content chat-post">
      {block:Title}<h3>{Title}</h3>{/block:Title}

      <ol class="chat">
        {block:Lines}<li class="{Alt} speaker{UserNumber}">
          {block:Label}<span class="label">{Label}</span>{/block:Label}
          <span class="line">{Line}</span>
        </li>{/block:Lines}
      </ol>
    </div>
    {/block:Chat}



{block:Video}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br>
   <div class="content video-post">
      <div class="video">{Video-500}</div>
      {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
    </div>
    {/block:Video}




    {block:Audio}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br><br>





{block:IfShowAlbumArtOnAudioPosts}
                            {block:AlbumArt}
                                <div class="album_art">
                                    <img src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}" style="margin-bottom: 5px"/>
                                </div>
                            {/block:AlbumArt}
                        {/block:IfShowAlbumArtOnAudioPosts}






    <div class="content audio-post">
      <div class="audio">
<script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?7"></script>
<span id="audio_player_{PostID}">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 9</a> is required to listen to audio.]</span>
<script type="text/javascript" src="/api/read/json?id={PostID}"></script>
<script type="text/javascript">
    var color = "FFF700";
    var player = tumblr_api_read['posts'][0]['audio-player'].replace("color=FFFFFF", "color=" + color);
    replaceIfFlash(9, "audio_player_{PostID}", player);
</script>
</div>
<p>plays: <span class="plays">{FormattedPlayCount}</span></p>


      {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
    </div>
    {/block:Audio}

<div class="clear">&nbsp;</div>

  </li>

{/block:Posts}


{block:IfDisqusShortname}
    {block:Permalink}
    <div id="disqus">
    <div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script><noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>
    </div>
    {/block:Permalink}
    <script type="text/javascript">
    //<![CDATA[
    (function() {
        var links = document.getElementsByTagName('a');
        var query = '?';
        for(var i = 0; i < links.length; i++) {
        if(links[i].href.indexOf('#disqus_thread') >= 0) {
        query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
        }
        }
        document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
    })();
    //]]>
    </script>
    {/block:IfDisqusShortname}


</div> <!-- .box -->
      {/block:Posts}



    </div> <!-- .posts -->

    <div style="clear: both"></div>

    {block:PermalinkPage}
    {block:IfShowNotesOnPermalinkPages}
      {PostNotes}
    {/block:IfShowNotesOnPermalinkPages}
    {block:PermalinkPage}

    <div style="clear: both;"></div>


<div id="rightside">
<div class="widget">
</div>


<p><a href="http://iloveyourvideo.tumblr.com/">I Love Your Video | 2012</a></p> 

<p> <form onsubmit="return handleThis(this)">
<input type="text" name="number" />
<input type="submit" value="Search" />
</form> </p>

<p>Maybe some links
<a href="http://twitter.com/">twitter</a></br>
<a href="http://facebook.com/">facebook</a></br>
<a href="http://www.flickr.com/">flickr</a></br>
<a href="/">website</a></p>

<p><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpakhuis.dezwijger&amp;width=240&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:258px;" allowTransparency="true"></iframe></p>

<p>Advertisement</p>

<img src="http://i188.photobucket.com/albums/z152/dunkley2007/ad-2.png" border="0"</a>



</div>
</div>


</div><!--/rightside-->


</ol>

<div id="footer">

  <div id="pagination">
  {block:Pagination}
    <p class="back">&nbsp;{block:NextPage}
      <a href="{NextPage}">next</a> >>>
    {/block:NextPage}</p>
    <p class="forward">{block:PreviousPage}
     <<< <a href="{PreviousPage}">prev</a>
    {/block:PreviousPage}&nbsp;</p>

  {/block:Pagination}

  {block:PermalinkPagination}
    {block:PreviousPost}<p class="back">
      <a href="{PreviousPost}">next</a> >>>
    </p>{/block:PreviousPost}
    {block:NextPost}<p class="forward">
     <<< <a href="{NextPost}">prev</a>
    {/block:NextPost}</p>
  {/block:PermalinkPagination}

  {block:DayPagination}
    {block:PreviousDayPage}<p class="back">
      <a href="{PreviousDayPage}">next</a> >>>
    {/block:PreviousDayPage}</p>
    {block:NextDayPage}<p class="forward">
      <<< <a href="{NextDayPage}">prev</a>
    </p>{/block:NextDayPage}
  {/block:DayPagination}
  </div>



<br><br />

<center>
<a href="/archive">archive</a> // 
    <a href="/random">random post</a> //
    <a href="{RSS}">RSS</a> 
<br />
<font size="2"><i>powered by <a href="http://www.tumblr.com/">tumblr</a> - 
    <a href="http://www.tumblr.com/theme/9601">Quite Big theme</a> by <a href="http://georgedunkley.tumblr.com/">George Dunkley</a></i></font></center>



</div>










</div>


</div>




</body>
</html>

Answers


Using the CSS float property should help. For example using rightside.

#rightside 
{
margin: 0px auto;
position: relative;
left: 750px;
padding-top:0px;
width:240px;
float:right;
}

use float: left; for the content div...

#leftside 
{
    float: left;
}

I tried:

{
margin: 0px auto;  
position: relative;
left: 750px; 
padding-top:0px;
width:240px;
float:right;
}

Was testing a box and it seems to just stick at the bottom of the content area to the right. Tried setting bottom to 1000px which did move it up but when I zoom in or out it moves all over the place. Not sure if it's something to do with the CSS rules in my body but if you could help me that would be great! I can't show you what it looks like but you can contact me via email. Thanks!


Need Your Help

Getting decimal value of result

wolfram-mathematica logarithm

How can I get the decimal value of any result? I have looked at Output Format for Numbers, and think that the N function should do the trick, but I can't work it out. For instance:

How to repeat rdlc full page

asp.net .net visual-studio

I'm using VS 2013, VB.Net, and web forms. I have an rdlc file that has a table with dynamic content. Above the table there are some text boxes, some of the text boxes have static content, but som...