Should I consider the paragraph just like a text or a block of text (theory)?

Question

Today I get a work and see a little strange format form paragraphs <p></p>.

#product p { 
    float: left;
    width: 513px;
}

The HTML is:
Observations:
- the image every have 270px, never more

<div id='product'>
    <h1>Product name</h1>
    <div class='img-product'>
        <img src='http://fakeimg.pl/270x270/' />
    </div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>           
</div>

The result for this html/css is a image with 270px width in left of page, and a blank space right it.

• gist: https://gist.github.com/6549722/8321ac9097cfd4b0ad127e3f74fa86370119f43a
• html/css: http://dabblet.com/gist/6549722

My question is

Only theory, not practice (I know how to solve this problem, I'm just wondering if using the tag "p" is only targeting texts, ie, it should not be used as a block).

the correct thing is create a div, for example "description", and format them(as the positioning and size), and not to apply paragraph formatting such? Aiming at the paragraph in 99% of the time is just text.

I never see anyone format a paragraph like a div, or, I see, is in extremely specific case. Because, for me, paragraph is a text element, nothing more, so, the styles is for fonts, colors, line-height, etc.

Sorry for my english

Answer 1

The W3C Recommendation HTML 4.01 Specification says:

9.3.1 Paragraphs: the P element

The P element represents a paragraph.

7.5.4 Grouping elements: the DIV and SPAN elements

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

Suppose, for example, that we wanted to generate an HTML document based on a database of client information. Since HTML does not include elements that identify objects such as "client", "telephone number", "email address", etc., we use DIV and SPAN to achieve the desired structural and presentational effects.

If you've got an actual paragraph, use P, but if you're structuring something that's not a paragraph, use DIV or SPAN. The choice of which element to use is semantic, and should be based on the content. The choice of styling is orthogonal, really. You can style your paragraphs or your divisions however you like; they're both block level elements.

You do make an interesting point about trying to keep paragraph styles specific to the text, and not for document formatting, but this is only possible if you already have higher level divisions that the paragraphs are inside. If you don't, that wouldn't be an option. I'm personally a fan of simpler structure than more complex structure, so if my paragraphs suffice and don't need to be in higher level divisions, I'd just put the styling on the paragraphs, rather than wrapping them in divisions.

Answer 2

You will need float the div containing image to left. DIV is a block level element and won't allow any other element to come beside it unless floated.

.img-product{
    float:left;
}

Answer 3

try

#product p { 
    float: left;
    width: 513px;
    padding:0px;
    margin:0px;
}