One Float To Rule Them All

Posted
February 3 2004

After my manic rant of yesterday, I decided to stay awake all day in an attempt to break this messed rythm I've been in (I go to bed late in the morning). Around dinner time I wasn't feeling to bad, but wasn't hungry, so I decided to play some street basketball. This was around 5. While I was playing, I was feeling really good, but when I went home, I started feeling ill. I went to bed and slept for an hour or so. When I woke up, I felt a lot better. A few hours after, Jaron came to pay me a visit. I was still managing, so I could handle some company. Not for too long though — it was well before midnight that I started feeling ill and anxious. I decided to take a shower and head to bed. Jaron spend some more time with my mom — I don't think I was awake when he left.

My attempt to break my rythm seems to have been successfull. I woke up at 6 this morning. I didn't really know what to do, but I was feeling quite awake and was having creative thoughts (indication of some good rest finally?), so I decided to start my day.

My thoughts when I woke up (and probably before — which... bugs me... kind of) were about images floating in paragraphs (can't I just dream about sex, like normal people? Heh). Anyway, I decided to write down some of the possibilities in markup and style, for reference.

Here's a list.

Table with Caption

Markup

<table class="float-left" summary="A picture of a foo">
<caption>Foo</caption>
<tr>
<td><img alt="A picture of a foo" src="image.png" title="Foo" /></td>
</tr>
</table>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Style

.float-left { float: left }
caption { caption-side: bottom }

Pure CSS

Markup

<img alt="A picture of a foo" class="float-left" src="image.png" title="Foo" />
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Style

.float-left { float: left }
img.float-left:after { content: attr(title) }

Generic Container

Markup

<div class="float-left">
<p><img alt="A picture of a foo" src="image.png" title="Foo" /></p>
<p>Foo</p>
</div>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Style

.float-left { float: left }

Pseudo Class

Markup

<p class="float-left">
<img alt="A picture of a foo" src="image.png" title="Foo" />
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Style

p.float-left:first-child { float: left }
p.float-left:first-child:after { content: attr(title) }

Description List

Markup

<dl class="float-left">
<dt><img alt="A picture of a foo" src="image.png" title="Foo" /></dt>
<dd>Foo</dd>
</dl>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Style

.float-left { float: left }

Paragraph

Markup

<p class="float-left">
<img alt="A picture of a foo" src="image.png" title="Foo" />
<br />Foo
</p>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Style

.float-left { float: left }

By the way, while I was laying in bed last night — and was playing some NBA Street Vol. 2 — I did something weird with my teeth, and broke off a tiny piece of one tooth. Whatever.


ACJ

Comments

0 comments so far.

Comment

Identify
Remember Me?
Note
Markup allowed. Linebreaks and paragraphs are automatically converted. Email and ip addresses are logged but never shared with third parties. Comments are not moderated on opinion or use of language, but on relevance. I hate spam with a passion.