Infobox

Replace the following:

/* Infobox template style */
div.infobox {
    border: 1px solid #aaa;
    float: right;
    font-size: 11px;
    background-color: white;
}

With:

/* Infobox template style */
.infobox {
    border: 1px solid #aaa;
    background: white;
    float: right;
    clear: right;
    font-size: 11px;
    width: 22em;
}

Propose:

This will actually eliminate a bit of code in the infoboxes as they will no longer require a <div> wrapper around them because the class can be applied directly to the infobox table. Furthermore, the infobox now has a default width and, in the event that other floating objects are present, will clear any right floating objects that precedes it.

the div tags also provide a padding inside the box

How much of a margin is really needed?

If we wish to keep the current style, it has a margin of 7px. But to have the margin, the div will be required anyway.

You can just apply the margin to the .infobox class. There shouldn't be a need for an extra div.

With the div thumb: http://i48.tinypic.com/2na8caq.png
With the div thumb: http://i47.tinypic.com/14x2bmr.png

Notice how the header line does not intersect with the infobox in the picture with the div, where as it does in without it. Plus, width should be changed to min-width. Clear is already provided by the thumb div.

You appear to got padding and margin confused there. Padding is inside the box, margin is outside the box. See this tutorial on the CSS box model. What you want to use is the margin, not padding.

Yeah. You got me confused after you said margin after I said padding.

But anyway, my argument still stands.

Humm. I really like to find a way to get rid of those wrapping divs. I know that Wikipedia doesn't have any problems like the one you displayed. Maybe it is a problem with how the headers are styled. But it will take some digging and I don't feel up to it right now.