WordPress.org

Ready to get started?Download WordPress

Forums

How to get the widgets arrange horizontally (10 posts)

  1. pufaika
    Member
    Posted 6 years ago #

    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?

  2. chaoskaizer
    Member
    Posted 6 years ago #

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

  3. pufaika
    Member
    Posted 6 years ago #

    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.

  4. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    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.

  5. pufaika
    Member
    Posted 6 years ago #

    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.

  6. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    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?

  7. pufaika
    Member
    Posted 6 years ago #

    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 -->
  8. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    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.

  9. pratt07
    Member
    Posted 6 years ago #

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

  10. EricaS
    Member
    Posted 6 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic