;;; .emacs.lisp
(setq org-export-html-style
      "<style type=\"text/css\">#<:use "style.css"></style>")

# style.css
<<basic body style>>
<<header style>>
<<content style>>

The basic body has no margin and a pleasing (to me) khaki color.

# basic body style
body {
   background-color: #999966;
   margin: 0em;
}

The headers are carefully sized to try to take up a multiple of 1.4em with a consistent bottom margin.

# header style
h1 {
   font-size: 2.0em;
   margin-top: 1.9em;
   margin-bottom: 0.3em;
}
h2 {
   font-size: 1.5em;
   margin-top: 2.4em;
   margin-bottom: 0.3em;
}
h3 {
   font-size: 1.25em;
   margin-top: 1.25em;
   margin-bottom: 0.3em;
}

The main body is a pale yellow color with vertical borders. It’s got a decent font (the one that I have by default for my browser) with a slight tweak to the letter spacing and a big tweak to the leading. It keeps from getting too wide and stays centered. Oh, and I don’t skip space before lists.

# content style
div#content {
   background-color: #ffffcc;
   border-left: double #333300 3mm;
   border-right: double #333300 3mm;
   font-family: Times, serif;
   letter-spacing: 0.075em;
   line-height: 1.4;
   margin: 0em auto;
   padding: 2em;
   width: 45em;
}
ul {
   margin: 0;
}

Here is some sample output.

Take a look at this very site. All of the widgets on the left are floating over there. If you narrow your browser window (or bump up your text size), they will eventually fall into a single column. Narrow further and they will fall below this text.

That’s 80% of what I wanted out them. There are weird artifacts though caused by the different widget sizes. To accomplish this, I not only had to float each widget, but I had to float the main column as well.

What I really wanted was a container that would flow things for me instead making me flow each item (poorly). It seems I should be able to specify a container that adds objects top-to-bottom-then-left-to-right keeping the minimum needed height for any addition. So, in adding a <div> to this container it would:

• insert it below the last inserted item if it need not lengthen itself to do so
• otherwise, insert it to the right of the last items as high up as it will go if it need not widen itself to do so
• otherwise, lengthen itself enough to place it below the rest of the contents

It may be as simple as preferred-width and -height attributes on the container, a flow-order: top-bottom-left-right;, and judicious use of maximum-width and -height.

Nobody’s Perfect

This wouldn’t solve every fluidity problem one might like to tackle. But, it would make many of them much simpler. No one would ever switch apartments if each piece of furniture got to say where it belongs on the moving truck.

When I am browsing, I don’t want to have to care.

When I am designing a site, I don’t want the user to have to care.

CSS is my enemy

All of the trouble using floats for columns all spring from a fundamental flaw in CSS:

How items flow with CSS is a property of the object instead of its container.

Now, maybe I am being a bit harsh in calling it a fundamental flaw. For all I know, it was a conscious choice. My guess though is that it seemed natural to people who wrote browsers in the early 90′s (<blink> tags and all).