How to display a h1 element with an inline element next to it and a p element below it?

Question

I asked a question earlier about the best way to put edit/delete links inline with a h1 element. I was able to achieve this with the answers given, but I now have additional requirements where I need to display a paragraph below the h1 and edit/delete links.

So far, my HTML looks like this:

<div class="product-header">
  <div class="title">
    <h1>Product 1</h1>
  </div>
  <div class="admin">
      (<a href="#">Edit</a> | <a href="#">Delete</a>)
  </div>
  <p class="description">Product 1 is a cool product</p>
</div>

I'd like it to look like the following:

Product 1 (Edit | Delete)
Product 1 is a cool product

...rest of page content

But I'm not sure what CSS to use to achieve this! Everything I do seems to put the description paragraph on the same line as the title, like so:

Product 1 (Edit | Delete)Product 1 is a cool product

...rest of page content

Link to JSFiddle.

Answer 1

There is no need to add clear:both in .product-header class but you really need to add clear:both in .product-header .description class like given below:

.product-header .description {
    clear:both;
}​

DEMO

Additional Notes:

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

Answer 2

You just need to add clear:both to .description:

http://jsfiddle.net/kDQLZ/3/

Answer 3

Jsfiddle Demo

Hi now clear your p tag class clear left

as like this

.product-header .description {
 clear:left;   
}

Demo