It turns out not to have been so difficult. Here’s the CSS:


#left_col {
float: left;
width: 250px;
}
#right_col {
margin-left: 260px;
}

The key is using “margin-left”. I tried a bunch of other things, for instance positioning the right column relative to the left then setting its margin. All my other attempts lead to weird things like the right column’s list items all being left aligned.

CSS is frustrating because I’ll swear I’m doing something that makes sense according to the standard, but it doesn’t work.

The biggest thing I learned–that’s also fundamental, but I didn’t know it–is that inline elements cannot have their width set. Only block elements can have a width.

So what do you do when you want a fixed width inline element? Set its display attribute to block and float it left.

Weird.