Help - Search - Members - Calendar
Full Version: Sidebar at the bottom
Forums > Resource Center > Support Center > Blogger Support > Blogger Resolved Topics
Krayoni
Can someone tell me why my sidebar is all the way at the bottom...im not really good at vaules and stuff so if you could help me out i would appreciate it.

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title><$BlogPageTitle$></title>

  <$BlogMetaData$>

  <style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name:     Rounders 4
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     27 Feb 2004
----------------------------------------------- */


body {
  background:#bca;
  margin:0;
  padding:20px 10px;
  text-align:center;
  font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
  color:#333;
  font-size/* */:/**/small;
  font-size: /**/small;
  }


/* Page Structure
----------------------------------------------- */
/* The images which help create rounded corners depend on the
   following widths and measurements. If you want to change
   these measurements, the images will also need to change.
   */
@media all {
  #content {
    width:740px;
    margin:0 auto;
    text-align:left;
    }
  #main {
    width:485px;
    float:left;
    background:#466 url("http://www.blogblog.com/rounders4/corners_main_bot.gif") no-repeat left bottom;
    margin:15px 0 0;
    padding:0 0 10px;
    color:#ced;
    font-size:97%;
    line-height:1.5em;
    }
  #main2 {
    float:left;
    width:100%;
    background:url("http://www.blogblog.com/rounders4/corners_main_top.gif") no-repeat left top;
    padding:10px 0 0;
    }
  #sidebar {
    width:240px;
    float:right;
    margin:15px 0 0;
    font-size:97%;
    line-height:1.5em;
    }
  }
@media handheld {
  #content {
    width:90%;
    }
  #main {
    width:100%;
    float:none;
    background:#466;
    }
  #main2 {
    float:none;
    background:none;
    }
  #sidebar {
    width:100%;
    float:none;
    }
  }


/* Links
----------------------------------------------- */
a:link {
  color:#475;
  }
a:visited {
  color:#798;
  }
a:hover {
  color:#c63;
  }
a img {
  border-width:0;
  }
#main a:link {
  color:#fff;
  }
#main a:visited {
  color:#ced;
  }
#main a:hover {
  }


/* Blog Header
----------------------------------------------- */
@media all {
  #header {
    background:#476 url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
    margin:0 0 0;
    padding:0 0 8px;
    color:#fff;
    }
  #header div {
    background:url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;
    padding:8px 15px 0;
    }
  }
@media handheld {
  #header {
    background:#476;
    }
  #header div {
    background:none;
    }
  }
#blog-title {
  margin:0;
  padding:10px 30px 5px;
  font-size:200%;
  line-height:1.2em;
  }
#blog-title a {
  text-decoration:none;
  color:#fff;
  }
#description {
  margin:0;
  padding:5px 30px 10px;
  font-size:94%;
  line-height:1.5em;
  }


/* Posts
----------------------------------------------- */
.date-header {
  margin:0 28px 0 43px;
  font-size:85%;
  line-height:2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#cf4;
  }
.post {
  margin:.3em 0 25px;
  padding:0 13px;
  border:1px dotted #6a7;
  border-width:1px 0;
  }
.post-title {
  margin:0;
  font-size:135%;
  line-height:1.5em;
  background:url("http://www.blogblog.com/rounders4/icon_arrow.gif") no-repeat 10px .5em;
  display:block;
  border:1px dotted #6a7;
  border-width:0 1px 1px;
  padding:2px 14px 2px 29px;
  color:#fff;
  }
a.title-link, .post-title strong {
  text-decoration:none;
  display:block;
  }
a.title-link:hover {
  background-color:#355;
  color:#000;
  }
.post-body {
  border:1px dotted #6a7;
  border-width:0 1px 1px;
  border-bottom-color:#485;
  padding:10px 14px 1px 29px;
  }
html>body .post-body {
  border-bottom-width:0;
  }
.post p {
  margin:0 0 .75em;
  }
p.post-footer {
  background:#577;
  margin:0;
  padding:2px 14px 2px 29px;
  border:1px dotted #6a7;
  border-width:1px;
  border-bottom:1px solid #577;
  font-size:100%;
  line-height:1.5em;
  color:#acb;
  text-align:right;
  }
html>body p.post-footer {
  border-bottom-color:transparent;
  }
p.post-footer em {
  display:block;
  float:left;
  text-align:left;
  font-style:normal;
  }
a.comment-link {
  /* IE5.0/Win doesn't apply padding to inline elements,
     so we hide these two declarations from it */
  background/* */:/**/url("http://www.blogblog.com/rounders4/icon_comment.gif") no-repeat 0 45%;
  padding-left:14px;
  }
html>body a.comment-link {
  /* Respecified, for IE5/Mac's benefit */
  background:url("http://www.blogblog.com/rounders4/icon_comment.gif") no-repeat 0 45%;
  padding-left:14px;
  }
.post img {
  margin:0 0 5px 0;
  padding:4px;
  border:1px solid #586;
  }
blockquote {
  margin:.75em 0;
  border:1px dotted #596;
  border-width:1px 0;
  padding:5px 15px;
  }
.post blockquote p {
  margin:.5em 0;
  }


/* Comments
----------------------------------------------- */
#comments {
  margin:-25px 13px 0;
  border:1px dotted #6a7;
  border-width:0 1px 1px;
  padding:20px 0 15px 0;
  }
#comments h4 {
  margin:0 0 10px;
  padding:0 14px 2px 29px;
  border-bottom:1px dotted #6a7;
  font-size:120%;
  line-height:1.4em;
  color:#fff;
  }
#comments-block {
  margin:0 15px 0 9px;
  }
.comment-data {
  background:url("http://www.blogblog.com/rounders4/icon_comment.gif") no-repeat 2px .3em;
  margin:.5em 0;
  padding:0 0 0 20px;
  color:#ced;
  }
.comment-poster {
  font-weight:bold;
  }
.comment-body {
  margin:0 0 1.25em;
  padding:0 0 0 20px;
  }
.comment-body p {
  margin:0 0 .5em;
  }
.comment-timestamp {
  margin:0 0 .5em;
  padding:0 0 .75em 20px;
  color:#fff;
  }
.comment-timestamp a:link {
  color:#fff;
  }
.deleted-comment {
  font-style:italic;
  color:#ccc;
  }


/* Profile
----------------------------------------------- */
@media all {
  #profile-container {
    background:#9b5 url("http://www.blogblog.com/rounders4/corners_prof_bot.gif") no-repeat left bottom;
    margin:0 0 15px;
    padding:0 0 10px;
    color:#fff;
    }
  #profile-container h2 {
    background:url("http://www.blogblog.com/rounders4/corners_prof_top.gif") no-repeat left top;
    padding:10px 15px .2em;
    margin:0;
    border-width:0;
    font-size:115%;
    line-height:1.5em;
    color:#fff;
    }
  }
@media handheld {
  #profile-container {
    background:#9b5;
    }
  #profile-container h2 {
    background:none;
    }
  }
.profile-datablock {
  margin:0 15px .5em;
  border-top:1px dotted #ce9;
  padding-top:8px;
  }
.profile-img {display:inline;}
.profile-img img {
  float:left;
  margin:0 10px 5px 0;
  border:4px solid #dfa;
  }
.profile-data strong {
  display:block;
  }
#profile-container p {
  margin:0 15px .5em;
  }
#profile-container .profile-textblock {
  clear:left;
  }
#profile-container a {
  color:#fff;
  }
.profile-link a {
  background:url("http://www.blogblog.com/rounders4/icon_profile.gif") no-repeat 0 .1em;
  padding-left:15px;
  font-weight:bold;
  }
ul.profile-datablock {
  list-style-type:none;
  }


/* Sidebar Boxes
----------------------------------------------- */
@media all {
  .box {
    background:#fff url("http://www.blogblog.com/rounders4/corners_side_top.gif") no-repeat left top;
    margin:0 0 15px;
    padding:10px 0 0;
    color:#666;
    }
  .box2 {
    background:url("http://www.blogblog.com/rounders4/corners_side_bot.gif") no-repeat left bottom;
    padding:0 0 8px;
    }
  }
@media handheld {
  .box {
    background:#fff;
    }
  .box2 {
    background:none;
    }
  }
.box3 {
  background:url("http://www.blogblog.com/rounders4/rails_side.gif") repeat-y;
  padding:0 13px;
  }
.sidebar-title {
  margin:0;
  padding:0 0 .2em;
  border-bottom:1px dotted #9b9;
  font-size:115%;
  line-height:1.5em;
  color:#566;
  }
.box ul {
  margin:.5em 0 1.25em;
  padding:0 0px;
  list-style:none;
  }
.box ul li {
  background:url("http://www.blogblog.com/rounders4/icon_arrow_sm.gif") no-repeat 2px .25em;
  margin:0;
  padding:0 0 3px 16px;
  margin-bottom:3px;
  border-bottom:1px dotted #eee;
  line-height:1.4em;
  }
.box p {
  margin:0 0 .6em;
  }


/* Footer
----------------------------------------------- */
#footer {
  clear:both;
  margin:0;
  padding:15px 0 0;
  }
@media all {
  #footer div {
    background:#466 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;
    padding:8px 0 0;
    color:#fff;
    }
  #footer div div {
    background:url("http://www.blogblog.com/rounders4/corners_cap_bot.gif") no-repeat left bottom;
    padding:0 15px 8px;
    }
  }
@media handheld {
  #footer div {
    background:#466;
    }
  #footer div div {
    background:none;
    }
  }
#footer hr {display:none;}
#footer p {margin:0;}
#footer a {color:#fff;}
  </style>


</head>



<body>



<!-- Begin #content - Centers all content and provides edges for floated columns -->

<div id="content">



<!-- Blog Header -->

<div id="header"><div>

  <h1 id="blog-title">
    <ItemPage><a href="<$BlogURL$>"></ItemPage>
    <$BlogTitle$>
    <ItemPage></a></ItemPage>
  </h1>
  <p id="description"><$BlogDescription$></p>

</div></div>





<!-- Begin #main - Contains main-column blog content -->

<div id="main"><div id="main2"><div id="main3">

<Blogger>

    <BlogDateHeader>
  <h2 class="date-header"><$BlogDateHeaderDate$></h2>
  </BlogDateHeader>

  

    

  <!-- Begin .post -->

  <div class="post"><a name="<$BlogItemNumber$>"></a>

    

    <BlogItemTitle>
     <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link" class="title-link"></BlogItemUrl>
    <h3 class="post-title">
     <$BlogItemTitle$>
    </h3>
     <BlogItemUrl></a></BlogItemUrl>
    </BlogItemTitle>

    <div class="post-body">

      <p>
      <$BlogItemBody$>
    </p>

    </div>

    <p class="post-footer">
      <em>posted by <$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>  
      <BlogItemCommentsEnabled>
         <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>
      </BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">links to this post</a>
</BlogItemBacklinksEnabled>
  <$BlogItemControl$>
    </p>

  

  </div>

  <!-- End .post -->

  


  <!-- Begin #comments -->
<ItemPage>

  <div id="comments">

    <BlogItemCommentsEnabled><a name="comments"></a>

    <h4><$BlogItemCommentCount$> Comments:</h4>

    <dl id="comments-block">
      <BlogItemComments>
      <dt class="comment-data" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
        At <a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>,
        <$BlogCommentAuthor$> said...
      </dt>
      <dd class="comment-body">
        <p><$BlogCommentBody$></p>
      <$BlogCommentDeleteIcon$>
      </dd>
      </BlogItemComments>
    </dl>
    
    <p class="comment-timestamp">
    <$BlogItemCreate$>
    </p>
  
  </BlogItemCommentsEnabled>        
    <BlogItemBacklinksEnabled>
    <a name="links"></a><h4>Links to this post:</h4>
    <dl id="comments-block">
    <BlogItemBacklinks>
        <dt class="comment-title">
        <$BlogBacklinkControl$>
        <a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
        </dt>
        <dd class="comment-body"><$BlogBacklinkSnippet$>
        <br />
        <span class="comment-poster">
        <em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
        </span>
        </dd>
    </BlogItemBacklinks>
    </dl>
    <p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
    </BlogItemBacklinksEnabled>


    
    <p style="padding-left:20px;">
    <a href="<$BlogURL$>"><< Home</a>
    </p>
    </div>

</ItemPage>

  <!-- End #comments -->

</Blogger>



</div></div></div>

<!-- End #main -->









<!-- Begin #sidebar -->

<div id="sidebar">

  

  <!-- Begin #profile-container -->

   <$BlogMemberProfile$>

  <!-- End #profile -->



  

  <!-- Begin .box -->

  <div class="box"><div class="box2"><div class="box3">
    
        <MainOrArchivePage>
  <h2 class="sidebar-title">Links</h2>
    <ul>
        <li><a href="http://news.google.com/">Google News</a></li>
        <li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
        <li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
  </ul>
  </MainOrArchivePage>

    <h2 class="sidebar-title">Previous Posts</h2>
  
  <ul id="recently">
    <BloggerPreviousItems>
        <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
     </BloggerPreviousItems>
  </ul>
  
  <MainOrArchivePage>
  <h2 class="sidebar-title">Archives</h2>
  
  <ul class="archive-list">
         <BloggerArchives>
        <li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
      </BloggerArchives>
      <ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
  </ul>
  </MainOrArchivePage>
  
  
  <p id="powered-by"><a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a></p>

    

    <!--

    <p>This is a paragraph of text that could go in the sidebar.</p>

    -->

  

  </div></div></div>

  <!-- End .box -->





</div>

<!-- End #sidebar -->









<!-- Begin #footer -->

<div id="footer"><div><div><hr />



  <p><!-- This is an optional footer. If you want text here, place it inside these tags, and remove this comment. --> </p>



</div></div></div>

<!-- End #footer -->









</div>

<!-- End #content -->



</body>

</html>
talcumpowder
Because it's under your content one. Well, and this may have something to do with it.
CODE
margin:15px 0 0;
What are the two zeros for? 'cause I've never seen that used before. A link to your blogger would also be helpful. wink.gif
moorepocket
it goes "top, right, bottom, left."

clockwise.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.