Problem with CSS on Wordpress

Question

Hi there! I'm trying to code my sidebar.php but it breaks and goes all the way down below the posts

PHP:

<!-- begin sidebar -->
<div id="menu">
<?php  /* Widgetized sidebar, if you have the plugin installed. */
  if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

    <label for="s">SEARCH</label>
    <form id="searchform" method="get" action="#">
      <div>
        <input type="text" name="s" id="s" size="15" />
        <br />
        <input type="submit" value="TYPE HERE_" />
      </div>
    </form>
  <div class="bg-sidebar">
    <h2>MOST READ</h2>
    <ul>
      <li><a href="javascript:void(0);">Worth A Thousand Words</a></li>
      <li><a href="javascript:void(0);">Feed Your Head</a></li>
      <li><a href="javascript:void(0);">Aliquam tempus, eros commodo porta pretium</a></li>
      <li><a href="javascript:void(0);">Pellentesque quis libero dui</a></li>
      <li><a href="javascript:void(0);">Lorem ipsum dolor sit amet</a></li>
    </ul>
    <h2>RECENT POSTS</h2>
    <ul>
      <li><a href="javascript:void(0);">Worth A Thousand Words</a></li>
      <li><a href="javascript:void(0);">Feed Your Head</a></li>
      <li><a href="javascript:void(0);">Aliquam tempus, eros commodo porta pretium</a></li>
      <li><a href="javascript:void(0);">Pellentesque quis libero dui</a></li>
      <li><a href="javascript:void(0);">Lorem ipsum dolor sit amet</a></li>
    </ul>
    <h2>ARCHIVE</h2>
    <ul>
      <li>
        <?php wp_get_archives('type=monthly'); ?>
      </li>
    </ul>
    <h2>LINKS</h2>
    <ul>
      <li><a href="http://www.t.com"&gt;t&lt;/a&gt;&lt;/li&gt;
      <li><a href="http://www.tt.com"&gt;tt&lt;/a&gt;&lt;/li&gt;
    </ul>
  </div>
  <?php endif; ?>
</div>

CSS:

* { margin: 0; padding: 0; }
body, input { font-family: "Trebuchet MS"; font-size: 12px; }
.move { clear: both; height: 0; float: none !important; }
body { background: url(images/bg.gif); width: 991px; position: absolute; top: 0; left: 50%; margin: 0 0 0 -495px; padding: 0 0 71px 0; }
a { text-decoration: none; }
li { list-style: none; }
img { border: 0; }

 #searchform { float: left; width: 366px; height: 27px; }
 #searchform * { float: left;}
 #searchform label { width:75px; height: 26px; border: solid 1px #ab0000; border-width: 1px 1px 0 0; text-align: center; line-height: 25px; font-weight: bold; font-size: 18px; color: #ab0000; background: white; }
 #searchform p { border-bottom: solid 1px #ab0000; width: 290px; height: 25px; }
 #searchform input { border: 0; margin: 6px 0 0 10px; display: inline; width: 234px; font-weight: bold; color: #999999; background: transparent; outline: none; height: 16px; }
 #searchform button { background: url(images/btn_vai.gif); width: 34px; height: 24px; border: 0; margin: 0 0 2px 0; float: right; }

#menu { width: 366px; height: 40px; float: left; margin: 1px 0 0 0; }
.bg-sidebar { background: white; width: 366px; padding: 50px 0 0 0; }
#menu h2 { color: #ab0000; font-size: 18px; line-height: 18px; padding: 0 0 10px 15px; }
#menu ul { border-top: solid 1px #d5d5d5; padding: 0 0 38px 0; }
#menu li { border-bottom: solid 1px #f3f2f2; line-height: 30px; font-size: 13px; font-weight: bold; padding: 0 0 0 24px; }
#menu li a { color: black; }

Can somebody help me out on this one?

Answer 1

My advice is: don't use this kind of code for sidebar. Please use Wordpress sidebar.

If you want to use dynamic sidebar with your custom css and most advanced way you want to use the dynamic sidebar for each page, than refer to the following article. http://wordpressapi.com/register-dynamic-multiple-sidebar-wordpress/

Answer 2

Sidebars that fall below the content in Wordpress are often simply a missing closing </div> tag or two. Use the xhtml code validator at The W3C Markup Validation Service to look at your site and pages. Tick the box to "Show Source" in Options and you'll get a code listing that will point you to which of your theme files have problems. Compare a page with the correct sidebar placement and one that is broken.

Answer 3

Another reason the sidebar might be bumping down is that it's too wide to float-right within the space. I can't tell from the code you supplied but if the full width of the page is set to 966px and the sidebar is 366px, the main area content should be 600px (or less, depending on margins and padding). Try making the sidebar or main body content narrower.

If none of these suggestions work, I recommend posting a link to your page here. You'll get much better answers that way.