Support » Themes and Templates » How to get the widgets arrange horizontally

  • pufaika

    (@pufaika)


    I added an extra sidebar to my site. I placed in header. When I add widgets to this sidebar they arrange vertically.

    How do I get them to arrange horizontally?

Viewing 9 replies - 1 through 9 (of 9 total)
  • chaoskaizer

    (@chaoskaizer)

    you need to provide more info regarding this issue, at least throw out some codes or URLs.

    pufaika

    (@pufaika)

    Thanks for your comment, chaoskaizer.

    http://pufaika.rollin.lv/ <- this is my site, runs on sandbox theme – milkia.

    The horizontal area below header with the “Pēdējie komentāri” is like sidebar.

    The sidebar code:

    <div id="3rd" class="sidebar">
    	<ul class="xoxo">
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(3) ) : else : ?> <?php endif; ?>
    	</ul>
    </div><!-- #3 .sidebar -->

    That’s all I can give. If you need more, ask.

    I tried to use table and more sidebars, but that messed up the layout.

    Moderator Samuel Wood (Otto)

    (@otto42)

    The basic idea behind making an unordered list display in a horizontal pattern instead of a vertical one is to make it’s List Items display:inline.

    In your case, add this to the stylesheet:

    #3rd ul li {
    display: inline;
    }

    You may need to mess with it more to position them correctly, but that’s the basic principle.

    pufaika

    (@pufaika)

    Otto42, I tried display:inline option, that made the widgets to appear squeezed together.

    Yeah, forgot to mention that I have no knowledge about CSS and php coding.

    Moderator Samuel Wood (Otto)

    (@otto42)

    Well, you only have one widget there, so I can’t see them “squeezed together”.

    display:inline is the only way to do what you want. If they’re squeezed, then that’s another problem, isn’t it?

    pufaika

    (@pufaika)

    Well, you only have one widget there, so I can’t see them “squeezed together”.

    True, I removed the other widget. 😉

    Maybe there is a way to make the sidebars arrange horizontally in this code?

    <div id="3rd" class="sidebar">
    	<ul class="xoxo">
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(3) ) : else : ?> <?php endif; ?>
    	</ul>
    </div><!-- #3 .sidebar -->
    Moderator Samuel Wood (Otto)

    (@otto42)

    No, no, no. People always get this wrong.

    When you want to control how things LOOK on the page, then you are editing CSS. Period. It has nothing to do with the code in the PHP or the HTML code.

    The HTML describes the content. The CSS describes the way that content is presented.

    pratt07

    (@pratt07)

    Otto42
    lose the freaking attitude – If you don’t like to answer
    the queries THEN DON’T.

    EricaS

    (@ericas)

    If you want multiple widgets without the “squeezed” look then add some padding on the left and right sides.

    padding: Top Right Bottom Left

    That shows you where to add the padding. So for example, to move the widgets apart you do this:

    padding: 0px 10px 0px 10px

    This adds padding to the left and right sides of your widgets by 10 pixels. Thus, moving them apart. This is all in your .css file. Hope this helps.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to get the widgets arrange horizontally’ is closed to new replies.