Quarter Life Crisis

The world according to Sven-S. Porst

« Unicode Checker 1.5.6MainNothing New »

CSS anyone?

582 words

"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

My idea for that is to have a box just like those at the left and the right of the text float within the text like the images do. I can achieve that as can be seen here. To do this, it mainly takes a 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.

Tell Me

... how to move this box into the text above.

April 10, 2003, 1:19


Comment by colin_zr: User icon

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.

April 12, 2003, 20:23

Comment by ssp: User icon

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.

April 13, 2003, 19:45

Add your comment

« Unicode Checker 1.5.6MainNothing New »

Comments on




This page

Out & About

pinboard Links