Forums

WordPress › Support » Themes and Templates

[resolved] how to get 2 sidebars side by side? (9 posts)

  1. MPM
    Member
    Posted 4 years ago #

    Having a bit of trouble making my custom theme play nice.

    I have 3 columns - content/sidebar/sidebar.

    The 2nd sidebar keeps dropping to the bottom of the 1st sidebar.

    Any solutions or links to sites that could save my bacon?

  2. cemiotika
    Member
    Posted 4 years ago #

    And what's the problem? you want something like

    SIDEBAR CONTENT
    SIDEBAR

    or

    SIDEBAR CONTENT SIDEBAR

    Maybe you must try the float:left, float:right in your style sheet for every container,

    Cheerz!,
    Hope this can Help!,

  3. MPM
    Member
    Posted 4 years ago #

    I want

    CONTENT SIDEBAR SIDEBAR

    BUT I GET

    CONTENT SIDEBAR
    ....................................SIDEBAR

    If I add something to the 1st sidebar (like a widget) that changes the sidebar height the 2nd sidebar drops down with it.

  4. cemiotika
    Member
    Posted 4 years ago #

    You must try something like this:

    <style>
#wrap{size:760px}
#content{float:left; width:500px;}
#side1{float:left; width:130px;}
#side2{float:left;width:130px;}
</style>

<?php get_content(); ?>
<?php get_side1(); ?>
<?php get_side2(); ?>

    This must work,

    Cheerz!,
    Hope this can Help!,

  5. cemiotika
    Member
    Posted 4 years ago #

    You must try something like this:

    <style>
#wrap{size:760px}
#content{float:left; width:500px;}
#side1{float:left; width:130px;}
#side2{float:left;width:130px;}
</style>

<?php get_content(); ?>
<?php get_side1(); ?>
<?php get_side2(); ?>

    This must work,

    Cheerz!,
    Hope this can Help!,

  6. cemiotika
    Member
    Posted 4 years ago #

    Check this to make you an idea of what im talking about:

    <!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">
<head>
<style>
#wrap{size:760px}
#content{float:left; width:500px;}
#side1{float:left; width:130px;}
#side2{float:left;width:130px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<div class="wrap">
  <div id="content">CONTENT</div>
  <div id="side1">SIDEBAR 1</div>
   <div id="side2">SIDEBAR 2</div>
</div>
</body>
</html>

    Cheerz!,
    Hope this can Help!,

  7. nolageek
    Member
    Posted 4 years ago #

    Wouldn't you want this?

    #content{float:left; width:500px;}
#side1{float:right; width:130px;}
#side2{float:right;width:130px;}

    (nevermind, you were right. Mine swapped Side1/Side2)

  8. moshu
    Member
    Posted 4 years ago #

    If you have margins/paddings and borders - the 500+130+130 will not fit in 760, and one sidebar will always go down!

  9. MPM
    Member
    Posted 4 years ago #

    Thanks heaps guys. That worked a treat.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags