Question

This is probably a simple question but I am having lots of trouble getting it to do what I want. I have a bunch of elements I want to float:left then afterwords have text in a block. Here is what I want where | is the edge of the page and –> means a page resize:

[element][element][element][element]|        [element][element][element]  |
[element][element]                  |  -->   [element][element][element]  |
texttexttexttexttexttexttxttexttextt|        texttexttexttexttexttexttxtte|
exttexttext                         |        xttexttexttexttext           |

and here is what is currently happening in everything I have tried:

[element][element][element][element]|        [element][element][element]  |
[element][element]texttexttexttextte|  -->   [element][element][element]te|
xttexttxttexttexttexttexttext       |        xttexttexttexttexttexttxttext|
                                             texttexttexttext             |

The elements are floated left – the text is displayed block. I tried wrapping the elements in their own div but this also didn’t work… any help for how to display it?

Answer 1

Just add a clear: left to the element which contains your text, it should break it down below all the floated stuff.