html css lists with multiple content don't stay inline

Question

Hello,

I have three divs with content (h3 header, img, and p text) that are approx. 400x300 and I am trying to get them to display inline, beside eachother. The image by itself displays properly, however when ever I add the h3 and or p text to it, it goes onto the next line. My guess is the h3 and p have built in breakers.

Is there anyway to prevent them from going to the next line, and still displaying properly?

ex. http://fireflyspices.com/

code:

    <ul>
    <li>
<div id="new_recipe">

<h3><a href="http://fireflyspices.com/?p=366" rel="bookmark" title="Permanent Link to Maybe?">
    Maybe?</a></h3><br />
<img src="http://fireflyspices.com/wp-content/uploads/2010/09/cajun-mojo-img.png"&gt;&lt;br />
<p>I might like cjun mojoj</p>
</div>
       </li>

Regards,

Answer 1

If you want all three elements in the same line why do have
tags after the h3 and img tag. remove them and you should be fine

Answer 2

Simply add two rules to your stylesheet:

#Recipes ul li { float: left; width: 312px; }

Tested in Firefox and IE8.

Answer 3

The reason why this won't work is because you cannot have block level elements inside inline elements, even if this was originally valid it is no longer true.

Elements like li, h3 and p are called block level elements, and have characteristics such as expanding to fill up all space available to them and forcing surrounding contents onto new lines. You can check which elements are inline and which are block with the Sitepoint HTML Reference.

You shouldn't give display: inline to everything. In fact, every one of those you used in the recipe section can be removed. You can also remove the extraneous br tags once you do that. Margin and padding is far better if you need extra spaces. The styles you need is simply:

#Recipe li {
  float: left;
  margin-right: 12px;
}

Removing the useless float: left on #Recipe would also help debugging in the future.