Empty spaces on homepage

I’ve seen the same issue. It seems the designer used float:left on the articles, which causes problems with the layout when the articles are not all the same length.

Try injecting the following CSS into your [Appearance -> Theme Options -> Layout -> Custom CSS] box:

.twocol {
    width: 49%;
    display: inline-block;
    float: none;
    vertical-align: top;
    /*Dirty IE 7 Hack*/
    zoom: 1;
    *display: inline;
}

*edit to preserve narrow window behavior:

.entries {
    display: inline-table;
}
.twocol {
    display: inline-block;
    float: none;
    vertical-align: top;
    /*Dirty IE Hack*/
    zoom: 1;
    *display: inline;
}

Hi aschultz,

sorry for the delay. Now I’ve found some time and tested your code and it seems that with it the second content column (middle one: left and middle are content, right one is the sidebar) isn’t used anymore, it’s still completely empty, all articles are in the left column.

Woe unto me for not testing across browsers. Sorry about that. I know inline-block is the solution, I just need to get the right combination of other settings.

I’ll take another look and get back to you.

Looks like it was an issue with the spacing that inline-block can add based on whitespace in the HTML. Try the following. I’ve tested it on my site across the Chrome/FF/IE.

#content .entries {
    /* Attempt to remove whitespace caused by inline-block settings for children */
    display: inline-table;
    letter-spacing: -0.25em;
    word-spacing: -0.25em;
}

#content .entries article {
    /* Undo negative spacing */
    letter-spacing: normal;
    word-spacing: normal;  

    /* Turn off float set by theme */
    float: none;

    /* Line up articles on the top edge */
    vertical-align: top;

    /* Wrap the articles */
    display: -moz-inline-stack;
    display: inline-block;
    /* IE 6/7 hack */
    zoom: 1;
    *display: inline;
}

Here’s some info on the topic:
https://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
https://www.lifeathighroad.com/web-development/css-web-development/inline-block-whitespace-workaround/

Btw, if you want to change the size of the main/sidebar columns, just add this and adjust the values:

.twothirdcol {
    width: 80%;
}

.threecol {
    width: 20%;
}

Edit: Updated to fix for wide articles

No need to be sorry, I appreciate your work and help.

Tested the new solution and it almost works. Almost in this case: The text of the first article (which spawns over both columns) isn’t readable anymore, as all text is written in one line (eache new line overwrites the ones before without any clearing or newline). Also the links under the article (author, permalink, …) are unreadable as there seems to be no letterspacing. But if I comment out the letter-spacing:-0.25em and word-spacing:-0.25em the text gets displayed correctly but the second column is gone.

So I tried and added “, article.onecol” after article.twocol and it seems to work.

Ah, yeah, I forgot about the wide articles. I had them turned off.

Your fix sounds good. Also an option is to do “#content .entries article” instead of “article.twocol, article.onecol” so that it applies to every article inside the content section, regardless of its column class, and doesn’t affect any potential articles outside the content section.

Thank you. It works. Thank you very much.

One last question for this topic: ATM the left and right articles start at the same line, regardless of the ending of the upper article. Like, the right article is shorter than the left one, but both following (lower) articles begin at the same point (which is set by the longer upper article). Do you think it’s possible that the articles start independently? Only set by a margin/padding from the article above, not paying attention to the neighbour column?

Do you mean such that articles flow left to right, and wrap, but when they wrap they collapse up to the bottom of the article above them? I’m not sure how I’d do that.

Looks like the latest version of Pinboard (1.0.9) does what you want (and doesn’t need the hacks above). It uses lots of absolute positioning to make it happen.

With 1.0.9. I also get the spaces between the articless, so I need your fix there too.

What I was trying too say: ATM the left and right article “boxes” always start at the same height, which is the the end point from the larger box above + the margin/padding. Say, you have 2 article boxes, the left one is 50 long (units doesn’t matter here), the right one is 64 long. The both boxes after them will start at 64+padding/margin, which will cause that the whitespace is not the same between the boxes. My question was/is: Is it possible to start the next article independently from the article in the other column? So that the article always starts at “previous article in the same column”+padding/margin.