Two Columns
Left Float with Main Body on the Right
At one time the Fox and the Stork were on visiting terms and seemed very good friends. So the Fox invited the Stork to dinner, and for a joke put nothing before her but some soup in a very shallow dish. This the Fox could easily lap up, but the Stork could only wet the end of her long bill in it, and left the meal as hungry as when she began. "I am sorry," said the Fox, "the soup is not to your liking."
"Pray do not apologise," said the Stork. "I hope you will return this visit, and come and dine with me soon." So a day was appointed when the Fox should visit the Stork; but when they were seated at table all that was for their dinner was contained in a very long-necked jar with a narrow mouth, in which the Fox could not insert his snout, so all he could manage to do was to lick the outside of the jar.
"I will not apologise for the dinner," said the Stork:
"One bad turn deserves another."
Once when a Lion was asleep a little Mouse began running up and down upon him; this soon wakened the Lion, who placed his huge paw upon him, and opened his big jaws to swallow him. "Pardon, O King," cried the little Mouse: "forgive me this time, I shall never forget it: who knows but what I may be able to do you a turn some of these days?" The Lion was so tickled at the idea of the Mouse being able to help him, that he lifted up his paw and let him go. Some time after the Lion was caught in a trap, and the hunters who desired to carry him alive to the King, tied him to a tree while they went in search of a waggon to carry him on. Just then the little Mouse happened to pass by, and seeing the sad plight in which the Lion was, went up to him and soon gnawed away the ropes that bound the King of the Beasts. "Was I not right?" said the little Mouse.
Little friends may prove great friends.
"Oh Father," said a little Frog to the big one sitting by the side of a pool, "I have seen such a terrible monster! It was as big as a mountain, with horns on its head, and a long tail, and it had hoofs divided in two."
"Tush, child, tush," said the old Frog, "that was only Farmer White's Ox. It isn't so big either; he may be a little bit taller than I, but I could easily make myself quite as broad; just you see." So he blew himself out, and blew himself out, and blew himself out. "Was he as big as that?" asked he.
"Oh, much bigger than that," said the young Frog.
Again the old one blew himself out, and asked the young one if the Ox was as big as that.
"Bigger, father, bigger," was the reply.
So the Frog took a deep breath, and blew and blew and blew, and swelled and swelled and swelled. And then he said: "I'm sure the Ox is not as big as..." But at this moment he burst.
Self-conceit may lead to self-destruction.
Three Columns
Left Float with Main Body on the Right
A Wolf had been gorging on an animal he had killed, when suddenly a small bone in the meat stuck in his throat and he could not swallow it. He soon felt terrible pain in his throat, and ran up and down groaning and groaning and seeking for something to relieve the pain. He tried to induce every one he met to remove the bone. "I would give anything," said he, "if you would take it out." At last the Crane agreed to try, and told the Wolf to lie on his side and open his jaws as wide as he could. Then the Crane put its long neck down the Wolf's throat, and with its beak loosened the bone, till at last it got it out.
"Will you kindly give me the reward you promised?" said the Crane.
The Wolf grinned and showed his teeth and said: "Be content. You have put your head inside a Wolf's mouth and taken it out again in safety; that ought to be reward enough for you."
Gratitude and greed go not together.
Wrapping Up
We have seen how using floats can be a substitute to using absolute positioning methods to achieve 2 and 3 column layouts. Through the use of a large left and/or right border we can have text wrap the sides of the float but not its top and bottom. This then is the trick to creating multiple columns with this method.
However, useful as floats are they cannot be used to create more than 3 columns. Moreover, because border widths cannot be specified as a percentage value, the width of the floated columns cannot be made fluid, so that when the client resizes the browser window the main body will resize but the width of the float will not. As we have seen way to get around this is to use padding instead of border since values for the former can be expressed in percentages.