Sometimes CSS issues aren’t worth fixing. Over at our webcomic site Onezumi.com we had a new requirement that had us displaying 2 different comics on the index page at once. We also wanted to have the news posts associated with each comic also appear on the index (each comic has it’s own category), but side by side, not in a single loop.

The actual code to get separate loops working is a bit tricky, but not too hard once you understand the process. The major issue arose in getting both posts to appear and not overlap or conflict when appearing side by side.

The typical way to do this in a theme is to make both loops into separate HTML div’s, then do a float on them to get them to appear next to each other. The problem comes in when you need to retrofit this into a theme and CSS setup that wasn’t initially set up with this expectation.

The cascading nature of CSS is normally a good thing–the evil comes in due to different web browser compatibility levels, as well as weird “by design” issues with CSS itself. One of the most frustrating things with CSS is that due to the cascade, you may not actually easily know why something isn’t appearing correctly. While the element level can clearly have a specific CSS entry that tells it to do something, there are times when an overarching CSS entry (like a div level img setting behavior) can override your local entry. It involves which CSS entry the browser decides to do first, then second. You would assume that the local entry would trump the div level one, but that’s not always the case.

Anyway, back to my specific problem: The floats for the 2 news entries weren’t working properly. The CSS caused elements from both div’s to overlap, or get pushed under the other div. Or the background wasn’t being extended correctly behind both divs. It was turning into a mess.

Then the answer hit me: screw CSS for placement. While I’m sure many people will choke on this statement: Tables almost always work properly for placement, so use them sometimes where appropriate. In my case all I needed to do was make a simply 2 row table and place each loop inside each td.

Boom, works great and no issues for any browsers. And yes, I did use CSS to make the look of the table correct. A bonus is the mobile version of the site looks perfect since tables are easy things to get correct in even the crappiest mobile browser.

So, my lesson is sometimes it’s not worth ripping things apart when the simple solution is available.