Question

I think it is best described by looking at an example:

http://jsfiddle.net/kV9yn/16/

That is my code (simplified) the problem is that the rectangle divs on the right div don’t line up correctly. What I want is for them to line up from left to right, and then carry over onto the second line when they go past the edge of the div:

Intended look:

   ._______________________________________________________________________.
   |                                                                       |
   |                              Title                                    |
   |                                                                       |
   |  blah blah blah blah blah blah                                        |
   |                                                                       |
   | Ingredient: [                ]       [block] [block] [block] [block]  |
   |                                      [block] [block] ...              |
   |                                                                       |
   |_______________________________________________________________________|

Answer 1

Change:

.ingredient
{
    display:block;
    ...

To:

.ingredient
{
    display:inline-block;
    ...

And you’re all set. The name of the property is pretty self-explanatory.

---

Here’s a Fiddle: http://jsfiddle.net/kV9yn/12/.