Search code examples
htmlcsspositionblockpositioning

How can I get a block to print complicated divs horizontally?

I have a block that prints out complicated divs with many line breaks, and I would like for it to print horizontally. For simplicity, I'm just trying it with this code:

html

<div id="body">
  <% Model.each do |f| %>
    <div id="item">This is <br> a test.</div>
  <% end %>
</div>

css

#body {
  #item {
    position: relative;
    display: inline;
  }
}

Apparently, display: inline; makes the next item start at the point the last item ends. So right now, it prints out like this:

This is
a test. This is
  a test. This is
    a test.

But I would like the next item to always start at the top of the container, like this:

This is     This is     This is
a test.     a test.     a test.

How can I accomplish this?

Solution

  • Changing display from inline to inline-block should help.

    #body {
  #item {
    position: relative;
    display: inline-block;
  }
}