0

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.

Community
  • 1
  • 1
XåpplI'-I0llwlg'I -
  • 21,649
  • 28
  • 102
  • 151

3 Answers3

2

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.

Ahsan Khurshid
  • 9,383
  • 1
  • 33
  • 51
1

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

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

Michael Peterson
  • 1,123
  • 6
  • 14
1

Jsfiddle Demo

Hi now clear your p tag class clear left

as like this

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

Demo

Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97