• Searching thorugh the net, I found a cool wordpress powered horizontal site… https://www.thehorizontalway.com I was just wondering how I can make the posts display from left to right and define a certain number, rather than showing downwards (the traditional way)…

Viewing 9 replies - 1 through 9 (of 9 total)
  • You can create a div of a set width, for example, if you have an outer containing element, set that at 600% width. Then have all of your post divs float left. They will, until they reach the end of the 600% width, then they’ll start wrapping.

    The problem with this type of layout, though, is that in some browsers, you *will* get a vertical scrollbar as well as a horizontal one (case in point, Opera will do this, and older Firefox versions) that you can’t get rid of.

    Hope that gets you started.

    Thread Starter garglenr

    (@garglenr)

    thanks for the reply. my site is https://www.garglenrinse.com and i just started off with a random 3 column theme, making the content area really wide, but still don’t understand how to make them float right, post by post…

    Thread Starter garglenr

    (@garglenr)

    BTW, I also need to know how to make the posts fit in little boxes perfectly once I get the posts to display horizontally. I know that the boxes in the website I pointed out earlier are just in the background image.

    Ahh..I see what you’ve got.

    Okay, what you need to do is, in your index.php file, you need to place everything within it’s own div. For example, your site has <div id="content"> follwed by your post date and the post. Enclose all of that stuff (via the index.php file) in a div class. Like so:

    <div id="content">
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>

    <div class="post" id="post-<?php the_ID(); ?>">
    <h2><a>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
    <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
    </div> <!-- /.post -->
    </div> <!-- /#content -->

    Then, in your CSS, just make the div.post a certain width – or enclose it in a box, sort of like:

    div.post {
    width:250px;
    padding:10px;
    border:solid 1px #000;
    margin-right:20px;
    float:left;
    }

    That’ll put all the contents of each post within a box that’s 250px wide with a 1px border around it, and give 20px of space between them.

    Of course, you’ll need to edit this stuff for your own layout, but it gives you the idea.

    Thread Starter garglenr

    (@garglenr)

    hmm, doodlebee thanks for the help, but unfortunately i still can’t get it to work. check my site again, its all messed up. the theme im modifying is called lightcms from gfxedit.com pls someone help…

    Try validating your site. You have an unclosed div – otherwise, they wouldn’t be wrapping around each other the wasy they are.

    In fact. I’m looking at your code, and I see 2 mistakes: 1, you haven’t wrapperd the entire post area in a div (there should be an opening div prior to the date/title area, and a closing one after the comments link). The second is that you have an opening div that is missing the end tag:

    <div class="feedback"<a...

    should be

    <div class="feedback"><a …`

    Anyway, aside from that, you haven’t used my example above. You need to have another div *after* the content div, encompassing the entire post.

    Thread Starter garglenr

    (@garglenr)

    i tried to but it doens’t work… it won’t even show the page… can i send u the templates and if u have time do u mind helping me? cos im kinda noob at this stuff

    Thread Starter garglenr

    (@garglenr)

    my email is lmao at garglenrinse dot com

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Make posts display horizontally? How?’ is closed to new replies.