Adding a 2nd Sidebar in a specific Wordpress theme

I learned how to add additional sidebars now I need to figure out how to add an extra sidebar besides the one already displayed in the theme Librio ( wordpress.org/extend/themes/librio ).

I absolutely have no idea where to look. The code is pure chaos and not self explanatory.

My sidebar.php contains the following code:

<div id="idontknow">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>
</div>

Now if I duplicate and add the same code but with 'sidebar2' all I get is the 2nd sidebar being displayed INSIDE the 1st sidebar.

<div id="idontknow">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>
</div>

<div id="ireallydont">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2') ) : ?>
<?php endif; ?>
</div>

I don't want that. I want 2 separate sidebars side by side. Can somebody help me out, pretty please?

I tried to expirement with CSS and id=leftsidebar and id=rightsidebar, but it simply doesnt work.

Just to clarify again: I have 2 sidebars! I've even got the correct code in functions.php

if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'sidebar1',
    'before_widget' => '<div class="block">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widgettitle">',
    'after_title' => '</h3>',
));
register_sidebar(array('name'=>'sidebar2',
    'before_widget' => '<div class="block">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widgettitle">',
    'after_title' => '</h3>',
));

The problem is, like mentioned, the 2nd newly created sidebar is shown inside the 1st sidebar. I want the theme modified so that I have 2 separate sidebars.

Solution

This is more of a CSS issue than anything else. I've replicated your setup and done the following to get two columns working.

My sidebar.php is:

<div id="sidebar">
  <div id="idontknow">
  <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>
  <?php endif; ?>
  </div>
  <div id="ireallydont">
  <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2') ) : ?>
  <?php endif; ?>
  </div>
</div>

I've registered both sidebars in functions.php (as Dextro suggested) and confirm they both work and show one below the other.

Then I made the following width changes in style.css:

at line 173, I changed #content's width to 570px
at line 303, I changed
sidebar's width to 300px

Then I added a new CSS rule:

#sidebar #idontknow,
#sidebar #ireallydont {
    width: 150px;float: left;
}

Now I have two columns side. You may want to adjust the widths and you'll definitely want to fix the sidebar background image.

Adding a 2nd Sidebar in a specific Wordpress theme

sidebar's width to 300px