Photoshop Question posted in
The official user guide can be found here.

CSS: Is it possible to create two columns left floated but in order? – Photoshop

Ok I know the title doesn’t make much sense, but bear with me. I just don’t know how to explain what I am accomplishing in words… I mocked up a layout in photoshop which I’ve attached below to best explain what I am trying to accomplish.

Basicly I have a blog which spits out my stories in order from story #1 – 5. I can assign a unique div class/id to the blog story depending on how I want that story to display. In my example .small and .large

Now, heres the hardpart. WordPress will put out the stories in order from #1-5 BUT I want to display all the .small stories in a left floated column and all the .large stories in another column.

My first instinct was to try to programatically have wordpress change the order in which it was pushing out stories to make it fit my columns, but that became to server intensive, then I thought of doing a very complex re-arrangement using jQuery to reorder everything in the user browser. The second way is progressing, but it still has quite a few bugs, so it dawned on me that this might be possible with the power of CSS. I’ve been messing with it all day, but can’t get it to work with CSS.

Was hoping someone else had any idea of how to pull something this crazy off?

To cut to the chase, just scroll to my attached picture below 🙂enter image description here

Tags:

3

Answers


  1. 0

    Going by your images, it looks like you want this:

    http://jsfiddle.net/JYdB9/4/

    @media (min-width: 1px) {
    .wrapper {
        text-align: right;
    }
    .small {
        float: left;
        width: 50%;
        text-align: left;
    }
    .large {
        display: inline-block;
        width: 50%;
        text-align: left;
    }
    .small + .small {
        clear: left;
    }
}

    There are a couple of provisos:

    1. You need a wrapper to align the inline-block elements to the right;
    2. You cannot have any whitespace between the <div>s (gets rid of the pesky whitespace issue)
    Login or Signup to reply.
  2. 0

    I would suggest making two containing div’s (columns), one for .small and one for .large, and then with jquery .appendTo() move .large to right column and .small to left. Of course this is not a css solution, but something simple like floating .small to left and .large to right will not work in this case.

    this kind of solution will not work:

    <body style="width: 300px">
    <div style="float: left; clear: left; width: 100px; height: 100px; background: #ccc;">left</div>
    <div style="float: right; clear: right; width: 200px; height: 200px; background: #ccc;">right</div>
    <div style="float: left; clear: left; width: 100px; height: 100px; background: #ccc;">left</div>
    <div style="float: right; clear: right; width: 200px; height: 200px; background: #ccc;">right</div>
    <div style="float: right; clear: right; width: 200px; height: 200px; background: #ccc;">right</div>
    <div style="float: right; clear: right; width: 200px; height: 200px; background: #ccc;">right</div>
    <div style="float: right; clear: right; width: 200px; height: 200px; background: #ccc;">right</div>
    <div style="float: left; clear: left; width: 100px; height: 100px; background: #ccc;">left</div>
   <div style="float: left; clear: left; width: 100px; height: 100px; background: #ccc;">left</div>

    basically you need two columns.

    Login or Signup to reply.
  3. 0

    Here’s a CSS solution that works if: 1) the squares are within a container that allows only two to be displayed in one line and 2) the number of .large blocks can exceed the number of .small blocks by only 1. Here’s a fiddle: http://jsfiddle.net/uPzh6/2/.

    Keep in mind that it is possible to create greater separation between two blocks in one line through the use of margins. See a different fiddle here: http://jsfiddle.net/VEEE6/1/.

    The solution works with an arbitrary order of .large and .small.

    HTML:

    <div id = "wrapper">
    <div class="small">1</div>
    <div class="large">2</div>
    <div class="large">3</div>
    <div class="small">4</div>
    <div class="small">5</div>
    <div class="small">6</div>
    <div class="large">7</div>
    <div class="small">8</div>
    <div class="large">9</div>
</div>

    CSS:

    * {
    margin: 0;
    padding: 0;
}
#wrapper {
    width: 210px;
    text-align: right;
}

#wrapper > div {
    width: 100px;
    height: 100px;
    background-color: rgba(100, 100, 100, 1);
    border: 1px solid rgba(30, 30, 30, 1);
    text-align: center;
    margin-bottom: 5px;
}

#wrapper > div.small {
    float: left;
    clear: left;
    line-height: 100px;
    color: yellow;
}

#wrapper > div.small:before {
    content: "small: ";
}

#wrapper > div.large {
    display: inline-block;
    color: #fff;
    line-height: 100px;
}

#wrapper > div.large:before {
    content: "LARGE: ";
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search