[closed] Alignment styling bug in website for /browse/objecttype/id

The pages dsplayed at "http://www.openstreetmap.org/browse/object-type/id" has a small problem isible on the French version : some h4 elements are aligned in the second column, because the h4 section above it takes two lines but the infos displayed on the next column only takes one line.

Note that h4 does not use a standard "display:block" but a "display:inline-block" which means tht it won't fill the rest of the line, but it may still contain line-wraps when its content does not for in the margins of the colum. The HTML structure is:

<div id="browse-section">
    <div>
        <h4>Displayed header1</h4>
        <p>Displayed value1</p>
    </div>
    <!-- ... -->
    <div>
        <h4>Displayed header2</h4>
        <p>Displayed value2</p>
    </div>
</div>

The bug occurs for the (too long) header "Dans le groupe de modification" (in English, this is "In changeset" which fits on a single line) which requires two lines in French (possibly other languages as well) when the value is just a single value. The next section just below it (displaying the value of the changeset comment with the header being "Commentaire") is then incorrectly formatted.

To fix this presentation bug, you just need to add this simple CSS rule:

.browse-section>div {
    clear: left;
}

This forces the current flowing position to be below the height of the displayed lines of the header (when they wraps).