You’re viewing an archive of outdated material. Visit The Web Standards Project’s updated site to learn about our current mission.

Web Standards Project: CSS: Bugs in Opera: Vertical Alignment of Floats

Let's say we were displaying a board game that allowed the players to take over the world, one country at a time (the mechanism is irrelevant). We would want to show these cards to the user in the most efficient way, without knowing how wide the user's browser window was. So we could have each card in a floating DIV, and then have all the DIVs float left, so that they would fill the width of their parent element, and then carry over to the next line. Or at least that is what they would do according to the CSS spec. Not so in Opera. The cards are simply accumulated, and are allowed to widen their parent element, forcing a horizontal scrollbar. Also, somehow, Opera gets either the height of the card or the height of its contents wrong, so the contents are sometimes too big. They shouldn't be unless they are printed in a very wide font. Since it doesn't quite work in Opera, we have an example of a correct rendering.

Algeria

Capital city
Algiers
Land Area
2,381,740 km2
Population
29,830,370
Life expectancy at birth
68.62 years
Languages
Arabic, French, Berber
GDP Per capita
$4,000

Brazil

Capital city
Brasília
Land Area
8,456,510 km2
Population
164,511,366
Life expectancy at birth
61.42 years
Languages
Portuguese, Spanish, English, French
GDP Per capita
$6,300

Croatia

Capital city
Zagreb
Land Area
56,410 km2
Population
4,664,710
Life expectancy at birth
73.49 years
Languages
Serbo-Croatian
GDP Per capita
$4,300

Dominica

Capital city
Roseau
Land Area
750 km2
Population
66,633
Life expectancy at birth
77.6 years
Languages
English, French patois
GDP Per capita
$2,500

Ireland

Capital city
Dublin
Land Area
68,890 km2
Population
3,606,952
Life expectancy at birth
75.98 years
Languages
English, Irish (Gaelic)
GDP Per capita
$16,800

Kuwait

Capital city
Kuwait
Land Area
17,820 km2
Population
1,834,269
Life expectancy at birth
76.44 years
Languages
Arabic, English
GDP Per capita
$16,700

Mozambique

Capital city
Maputo
Land Area
784,090 km2
Population
18,165,476
Life expectancy at birth
44.85 years
Languages
Portuguese, indigenous dialects
GDP Per capita
$670

Singapore

Capital city
Singapore
Land Area
637.5 km2
Population
3,440,693
Life expectancy at birth
78.15 years
Languages
Chinese, Malay, Tamil, English
GDP Per capita
$21,200

Turkmenistan

Capital city
Ashgabat
Land Area
48,100 km2
Population
4,229,249
Life expectancy at birth
61.51 years
Languages
Turkmen, Russian, Uzbek
GDP Per capita
$2,840

United States

Capital city
Washington
Land Area
9,158,960 km2
Population
267,954,764
Life expectancy at birth
76.04 years
Languages
English, Spanish
GDP Per capita
$28,600
You currently have 10 countries.

Source: CIA World Factbook, 1997.


Note. Technically speaking, the rule tested here is not part of CSS1. This was an omission in the original rules for floating elements, which was corrected with the publication of CSS2. The rule in question is #7 of CSS2's section 9.5.1, which is missing from CSS1's section 4.1.4.