Support » Plugin: Custom Post Type UI » [Plugin: Custom Post Type UI] Custom Posts stack on top of each other. Put in a horizontal row?

  • Resolved schoolspeak


    I know how to use CSS to float things left and therefore have them fall into a horizontal line, but it’s not working. There’s obviously something I need to override in the plugin. Here’s what’s going on:

    With the Custom Post Type UI plugin, I have created a Custom Post Type called “Projects”. I have a few “Project” posts now. All of them sit together within a 1000px-wide wrapper on a template page.

    Each custom post is 277px x 277px. In my CSS, I can control the posts by adding styles to the element .type-projects. When that element is floated left, in theory all the posts should line right up. But they don’t.

    ***** APPROACH #1: *****

    I styled the element containing the post like this:

    .type-projects {
    border: 15px solid #3B555A;
    margin:20px 20px 20px 0;

    ***** RESULT *****
    The border shows, and the post is inside, so the custom posts respond to the styling. But floating this element to the left did nothing.

    So I tried:

    ***** APPROACH #2 *****

    I went into the WordPress dashboard. With the plugin, I had created the Custom Post Type “projects”. I clicked one of the projects. Where you add the content (under the title) when creating a “project”, I went into html view and created:

    <div class=”customPostWrap”>

    Then in my CSS, I targeted that DIV like so:

    .customPostWrap {
    width: 400px;

    ***** RESULT *****

    Again, I can see that the element exists on my template page. I can change the padding and it moves around, etc. But now all the “customPostWraps” stack above each other. Help!

  • The topic ‘[Plugin: Custom Post Type UI] Custom Posts stack on top of each other. Put in a horizontal row?’ is closed to new replies.