Wordpress twentyten Seconday Sidebar

0
votes

I want a seconday sidebar in my twentyten theme in wordpress. I have added the code bellow to functions.php and sidebar.php and the sidebar appear. The proble now is that the sidebar is under each other and i want them next to each other, how can i do this ?

Example image:

enter image description here

FUNCTIONS.PHP

function add_my_sidebars(){
register_sidebar( array(
'name' => 'My sidebar',
'id' => 'my-sidebar',
'description' => 'Just a little description',
'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
} add_action('widgets_init', 'add_my_sidebars');

SIDEBAR.PHP

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<div id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
<?php dynamic_sidebar('my-sidebar'); ?>

</div><!-- #secondary -->

<?php endif; ?>

CSS for the Sidebar from styles.css

/* Sidebar */
.widget-area .widget {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    margin-bottom: 48px;
    margin-bottom: 3.428571429rem;
    word-wrap: break-word;
}
.widget-area .widget h3 {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
}
.widget-area .widget p {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}
.widget-area .textwidget ul {
    list-style: disc outside;
    margin: 0 0 24px;
    margin: 0 0 1.714285714rem;
}
.widget-area .textwidget li {
    margin-left: 36px;
    margin-left: 2.571428571rem;
}
.widget-area .widget a {
    color: #757575;
}
.widget-area .widget a:hover {
    color: #21759b;
}
.widget-area .widget a:visited {
    color: #9f9f9f;
}
.widget-area #s {
    width: 53.66666666666%; /* define a width to avoid dropping a wider submit button */
}
1
wordpresswordpress-theming

1 Answers

1
votes

Please try to implement below code.

I have added some CSS in main class so please add this CSS and check if the layout is the same as you want.

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
    margin: 0 auto;
    width: 965px !important;
}

#container {
    float: left;
    margin: 0;
    width: 60%;
}

#primary, #secondary {
    float: left;
    width: 190px;
}