html css float left right test page

Xah Lee, 2011-04-10

adbox1
adbox2

This is a test page on CSS “float” attribute.

There are 2 ad blocks {adbox1,adbox2} colored {pink, yellow}, with CSS float:right;clear:right. I want them to show on the right side of the page as a column. (so that all ads is a column on the right side.)

Then, there are 3 “flowbox” blocks. They are parts of the main content. Each one kinda a section block. They should flow from left to right like images. These “flowbox” has CSS float:left

The question is, why is there a large gap in the main section. (view source) That is, the “flowbox” starts to show after the yellow colored “adbox2”.

flowbox. Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, «and what is the use of a book,» thought Alice «without pictures or conversation?».

flowbox. Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, «and what is the use of a book,» thought Alice «without pictures or conversation?».

flowbox. Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, «and what is the use of a book,» thought Alice «without pictures or conversation?».