CSS Floating a Sidebar and Two Columns of Variable-length Posts

Question

I'd like to float a sidebar to the left and on the right float a slideshow (could be a div, li, etc.) with two columns of blog posts below it (left figure here, where the numbers represent the order the markup for the posts appears in the source). Sometimes the slideshow will not be present, and the posts need to shift up to take its place (right figure here).

I've attempted something like:

div#sidebar {
float:left;
width:240px;
}

div#right_column {
margin-left: 260px;
}

div#right_column div#slideshow {
width:640px;
height:360px;
}

div#right_column ol#posts li.post.odd {
float:left;
clear:left;
}

div#right_column ol#posts li.post.even {
margin-left:320px;
}

<div id="container">
<div id="header"></div>

<div id="sidebar"></div>

<div id="right_column">
    <div id="slideshow"></div>

    <ol id="posts">
        <li class="post odd"></li>
        <li class="post even"></li>
        <li class="post odd"></li>
        <li class="post even"></li>
        <li class="post odd"></li>
    </ol>
</div>

<div id="footer"></div>
</div>

but then the posts clear the sidebar (shifting them down below the sidebar, rather than beside it.

I also attempted to do something like:

div#sidebar {
float:left;
width:240px;
}

div#slideshow {
width:640px;
height:360px;
margin-left:260px;
}

ol#posts li.post.odd {
margin-left:260px;
}

ol#posts li.post.even {
float:right;
}

<div id="container">
<div id="header"></div>

<div id="sidebar"></div>

<div id="slideshow"></div>

<ol id="posts">
    <li class="post odd"></li>
    <li class="post even"></li>
    <li class="post odd"></li>
    <li class="post even"></li>
    <li class="post odd"></li>
</ol>

<div id="footer"></div>
</div>

but then first post in the right column is pushed below the first post in the left column.

This question is very similar to what I want, but they are attempting to float three columns of variable-height posts, whereas I only need two. I think there must be a pure-CSS solution, as I'm pretty close.

I appreciate any help you can provide :).

Can you post how you have structured your HTML, I think that might lead to the solution. — Andrew Jackman, Feb 03 '13 at 17:26

score 0 · Answer 1 · answered Feb 03 '13 at 18:34

You code is fine for the slideshow. Your problem comes from the fact that you use only 1 ol for your posts.

Your post on the right column is pushed below because it comes after your first post on the left column (and a float right will put your second post on the same level as your first post only if you put it before in your HTML code). You can try to put the "odd" li's in float left.

But it will result in some weird behavior because your posts have different heights. Example:

enter image description here

The best solution here is to use two columns:

one for the "odd" posts
one for the "even" posts

Your layout resembles the one Pinterest: variable height and multiple columns. They achieve this by using position absolute but it's difficult to maintain so I'd choose two columns.

Yes, I tried that method too, and I did get basically that result. I do have a limitation, as I'm using Tumblr; that is, the posts are dynamically generated and cannot be grouped in separate containers based on their odd or even position in the series, they are only labeled as such. So they do have to be grouped in a single list. — Chase Patterson, Feb 03 '13 at 19:05

CSS Floating a Sidebar and Two Columns of Variable-length Posts

1 Answers1