Can you make two columns in CSS that are left floated and maintain their original order?

Question

Can you make two columns in CSS that are left floated and maintain their original order?

While the title may not provide much clarity, I am struggling to put into words exactly what I am trying to achieve. I have created a layout in Photoshop which I have shared below to help illustrate my goal.

Essentially, I have a blog that displays my stories sequentially from #1 to #5. I can designate a unique div class/id for each story based on how I want it to be displayed. For example, .small and .large.

Now, here's the challenge. WordPress will output the stories in order from #1-5, but I want to showcase all the .small stories in a left floated column and all the .large stories in another column.

Initially, I attempted to programmatically alter the ordering of the stories being generated by WordPress to fit my desired columns, but this approach proved to be too server-intensive. Then, I explored a more complex rearrangement using jQuery to reorder elements in the user's browser. While this second method is making progress, it still contains numerous bugs. It occurred to me that perhaps CSS could offer a solution to this problem. I have been experimenting with various CSS techniques all day, yet I have been unable to achieve the desired result.

I was hoping someone else might have insight or ideas on how to accomplish such a challenging task?

To skip the explanation and view the attached picture, please scroll down :)

javascript html css

Answer 1

Answer №1

If you have a situation where you need to display squares in pairs within a container and there is always one more large block than small blocks, then this CSS solution might be helpful. You can see it in action in this fiddle: http://jsfiddle.net/uPzh6/2/.

Remember, you can adjust the spacing between the blocks by using margins effectively. Check out another example in this fiddle: http://jsfiddle.net/VEEE6/1/.

This solution will accommodate any order of large and small blocks.

Here is the HTML markup:

<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>

And here is the accompanying 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: ";
}

Answer 2

If you have a situation where you need to display squares in pairs within a container and there is always one more large block than small blocks, then this CSS solution might be helpful. You can see it in action in this fiddle: http://jsfiddle.net/uPzh6/2/.

Remember, you can adjust the spacing between the blocks by using margins effectively. Check out another example in this fiddle: http://jsfiddle.net/VEEE6/1/.

This solution will accommodate any order of large and small blocks.

Here is the HTML markup:

<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>

And here is the accompanying 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: ";
}

Answer 3

Answer №2

Based on the images you provided, it seems like what you are looking for is shown in the following link:

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;
    }
}

Keep in mind a couple of things:

You must have a wrapper to align the inline-block elements to the right;
Avoid any whitespace between the <div>s (to eliminate the whitespace issue)

Answer 4

Based on the images you provided, it seems like what you are looking for is shown in the following link:

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;
    }
}

Keep in mind a couple of things:

You must have a wrapper to align the inline-block elements to the right;
Avoid any whitespace between the <div>s (to eliminate the whitespace issue)

Answer 5

Answer №3

To optimize the layout, my recommendation is to create two separate divs (columns): one for elements with the class .small and another for elements with the class .large. Then, using jQuery's .appendTo() function, you can move the .large items to the right column and the .small items to the left column. While this approach may not rely solely on CSS styling, it offers a practical solution since simply floating .small elements to the left and .large elements to the right won't suffice in this scenario.

This example illustrates why this method will not be effective:

<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>

In essence, the key here is to utilize two distinct columns for improved organization.

Answer 6

To optimize the layout, my recommendation is to create two separate divs (columns): one for elements with the class .small and another for elements with the class .large. Then, using jQuery's .appendTo() function, you can move the .large items to the right column and the .small items to the left column. While this approach may not rely solely on CSS styling, it offers a practical solution since simply floating .small elements to the left and .large elements to the right won't suffice in this scenario.

This example illustrates why this method will not be effective:

<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>

In essence, the key here is to utilize two distinct columns for improved organization.

Can you make two columns in CSS that are left floated and maintain their original order?

Answer №1

Answer №2

Answer №3

Similar questions

Periodically transmit information to a Google Script web application

I noticed a change in the state between dispatches, but I did not make any alterations to the state

Utilizing turbolinks enables the page to be reloaded upon form submission

Stop the inclusion of the scrollbar in the mat-drawer-inner-container within the Angular mat-drawer Component

What is the best way to incorporate the value of a textbox into a list?

Exploring VueJs 3's Composition API with Jest: Testing the emission of input component events

Margin discrepancies when using em units

Visibility of the br tag is not detected

When using jQuery, the script will execute successfully only when running it chunk by chunk in the console, rather than running the

Sweet treats, items, and data interchange format

Add a new row to the table when a dropdown option is selected, and remove the row when deleted. Ensure that the row is only added

Having trouble getting the jQuery click event to work on iPhone browsers? Despite already trying the cursor:pointer; method

The error notification is not appearing in the correct location

Tips on leveraging state values within the makeStyles function in Material UI React

Have you not heard of the greatness of Selenium before?

What is the best way to target specific elements within my array using Jquery?

If I include beforeRouteEnter in one component, the this.$route property may become undefined in another component

What is the accurate Scrapy XPath for identifying <p> elements that are mistakenly nested within <h> tags?

Guide on toggling the button by clicking on the icon to turn it on or off

I seem to be encountering a z-index dilemma