How’d it get so late?

Anyway, after trying to figure out why the images I was including in my neatlinks were all showing up with different widths (even though they’re all 250px wide) I discovered it was an interaction between my having laid out the neatlinks column using individual tables (with the comment link in the left cell and the content in the right), and a css rule sizing the image based on a percent of the parent width.

Since the parent was a table cell and since table cells adjust creatively (read: unpredictably) to fit their contents, the image was being sized at the mercy of the text I included above or below it.

So I took this opportunity to fix that problem, by floating two divs to the left inside a container div. The important gotcha is to include a clearing div after the last floated item to ensure that the container div expands to surround the floats.

Here’s what it looks like visually:

The HTML (with embedded CSS) to do this looks like:

<div style="width:235px;border:1px solid green;">

<div style="float:left;width:30px;border:1px solid red;">
first cell
</div>

<div style="float:left;width:200px;border:1px solid blue;">
second cell
</div>

<div style="clear:both;"></div>

</div>

Good night, and good luck.

• Justinsomnia refreshed
• On aspect ratios and photography
• Neatlinks wordpressification
• At the end of the long tail of my blog
• Marking up blog post updates semantically

name

blog (optional)

comment