"Look mom, no tables," I thought when doing the HTML/CSS for these very pages a while ago. Presumably this is progress over my web site which usually validates and uses CSS for most of its looks but is stuck into a large table. This is mainly due to the fact that I couldn't figure out how to do the damn thing table-free without giving up the rigidness I need for the bi-lingual thing to work. Never mind, it looks OK and nobody cares anyway and I'm not too keen on re-doing the thing.
Still, in the name of progress, for curiosity's sake and for the elegance of it, these pages are on the receiving end of some practice in proper HTML/CSS fooling around – though they're less likely to validate due to careless typing on a day-to-day basis. And I think, doing this exercise has helped me to understand how the whole box-business works and how to place things in the browser window without using tables. Once you get the hang of it, it's actually pretty straightforward.
But – what I don't seem to manage is the following: Inspired by what people have over at Live Journal, I'd sometimes like to have a 'now playing' bit in my text.
Frustrated by CSS
float:right;statement. However, the drawback of this method is that it basically means I have to write the unrelated information in the middle of the text. This doesn't only lack elegance, but also looks quite confusing and random in the RSS feed.
So, definitely that extra bit of random information should be at the beginning or – even better – end of the text to not be in the way while it should be displayed somewhere along the text. My idea for doing this was to chuck in something along the lines of
The White Stripes, Elephant
position:relative; bottom:70px;: I.e. put the
<div>with the extra information at the bottom of the last paragraph, make sure it goes at the right with the text flowing around it, anchor it at the bottom of the paragraph and move it up a distance. The effects of this are strange and differ between browsers, e.g. with the
<div>being displayed where it's supposed to be but the text being flowed around its original position, as can be seen in the box in this paragraph. (I also tried playing around with
display:inline;but that didn't help either.
Is there something I don't understand about positioning using CSS? Is something fishy about the web browsers handling
float properties? Both seem likely.
While I'll definitely appreciate comments and hints on the further question, I have more observations on the latter: Just look at the post on Catch Me If You Can and how the text flows around the images in both Safari (and possibly Konqueror?) and Camino (and most likely any other Gecko based browser). In both cases it looks wrong: In Safari I have text running into the images and in Camino the text isn't flowing around the image. To me that suggests that the implementations of
float may be less-than-perfect at this stage.
... how to move this box into the text above.
Regarding floating a box in the text somewhere other than where it’s written, I can’t think of an obvious way of doing it. It’s entirely correct for the browser to put the relatively positioned box on top of the text above while leaving a hole in the text where it would’ve been.
As for the Catch Me If You Can post, I suspect that Gecko has a bug with floats and lists. It looks to me like each li element has a constant width, though the list as a whole is flowing ok. The first li element is the right width at the top to flow around the first image — it just doesn’t get wide again at the bottom after the image has ended. It’s the same with the second, third and fourth li elements and the second image. The last element, which is below all the images, is the full width of the column.
Too bad that HTML/CSS doesn’t seem to provide for the sort of floating things that I have in mind. I haven’t dug all the way through the documentation, so it was just my intuitive assumption that the text should float around wherever the object in question is.
Your assessment of the Gecko situation looks pretty precise to me. It’s not a big deal as everything remains readable.