The first five boxes have display: inline-block and no floats. See below for another set of five.
One of the protagonists of the tale. Portrayed as the seventh avatar of the god Vishnu, he is the eldest and favorite son of the king of Ayodhya, Dasharatha, and his Queen Kausalya. He is portrayed as the epitome of virtue.
One of the protagonists, the beloved wife of Rama, and the daughter of king Janaka. Rama got the chance to marry her by lifting a heavy bow in a competition organized by her father. The competition was to find the most suitable husband for Sita, and many princes from different states competed to win her. Sita is the avatar of goddess Lakshmi, the consort of Vishnu. Sita is portrayed as the epitome of female purity and virtue.
A vanara (a monkeylike being) belonging to the kingdom of Kishkindha. In some versions, he is portrayed as the eleventh avatar of god Shiva and an ideal bhakta of Rama. He is born as the son of Kesari, a vanara king, and the goddess Anjana. He plays an important role in locating Sita and in the ensuing battle.
A younger brother of Rama, who chose to go into exile with him. He is the son of King Dasaratha and Queen Sumitra, and twin of Shatrughna. Lakshmana is portrayed as an avatar of Shesha, the naga (dragon, serpent) king associated with the god Vishnu. He spends his time protecting Sita and Rama.
A rakshasa, the king of Lanka (current-day Sri Lanka). After performing severe penance for 10,000 years, he received a boon from the creator-god Brahma: he could henceforth not be killed by gods, demons, or spirits. He is portrayed as a powerful demon king who disturbs the penances of rishis (ascetics who practice austerities in the forest). Vishnu incarnates as the human Rama to defeat him, thus circumventing the boon given by Brahma.
The next five boxes have float: left and no CSS for inline-block. Note that the code for all the boxes is identical except for this difference.
One of the protagonists of the tale. Portrayed as the seventh avatar of the god Vishnu, he is the eldest and favorite son of the king of Ayodhya, Dasharatha, and his Queen Kausalya. He is portrayed as the epitome of virtue.
One of the protagonists, the beloved wife of Rama, and the daughter of king Janaka. Rama got the chance to marry her by lifting a heavy bow in a competition organized by her father. The competition was to find the most suitable husband for Sita, and many princes from different states competed to win her. Sita is the avatar of goddess Lakshmi, the consort of Vishnu. Sita is portrayed as the epitome of female purity and virtue.
A vanara (a monkeylike being) belonging to the kingdom of Kishkindha. In some versions, he is portrayed as the eleventh avatar of god Shiva and an ideal bhakta of Rama. He is born as the son of Kesari, a vanara king, and the goddess Anjana. He plays an important role in locating Sita and in the ensuing battle.
A younger brother of Rama, who chose to go into exile with him. He is the son of King Dasaratha and Queen Sumitra, and twin of Shatrughna. Lakshmana is portrayed as an avatar of Shesha, the naga (dragon, serpent) king associated with the god Vishnu. He spends his time protecting Sita and Rama.
A rakshasa, the king of Lanka (current-day Sri Lanka). After performing severe penance for 10,000 years, he received a boon from the creator-god Brahma: he could henceforth not be killed by gods, demons, or spirits. He is portrayed as a powerful demon king who disturbs the penances of rishis (ascetics who practice austerities in the forest). Vishnu incarnates as the human Rama to defeat him, thus circumventing the boon given by Brahma.
The two sets of five boxes illustrate the issues of inline-block and float. Each pink box should take up 25 percent of the width of the page. In the first group, there is an unintended space between pink boxes, making the fourth box fall below the first three boxes (which take up more than 75 percent of the row because of the spaces). In the second group, the width works as expected, with four boxes neatly in a line — but the alignment is ugly, with the fifth box falling at an unexpected position.
CSS flexbox provides a good solution to this layout challenge.