CODEWITHSUNDEEP
htmlcss
user1931754
user1931754

Reputation:

need help on css float

Why only the first line of paragraph appears on the left and all other lines below the image when both the paragraph and img is floated?Here goes the code..

    <!DOCTYPE html>
   <html>
    <head>
   <style>
    img,p 
   {
    float:left;
   }
  </style>
  </head>

<body>
 <img src="logocss.gif" width="95" height="84" />
 <p>
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.

 </p>

But everything goes fine when only img is floated i.e all the text appears on left

Upvotes: 0

Views: 60

Answers (1)

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

EXAMPLE

Try this code:

<img src="logocss.gif" width="95" height="84" />
 <p style="width:300px;">
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.

 </p>​

Your code doesn.'t work because the element p doesn't have a width

If the floated element does not have a pre-defined width, it will take up as much horizontal space as required and available, regardless of the float. Note: some browsers attempt to place elements beside floated elements when the width isn't defined - usually giving the non-floated element only a small amount of space. So you should always define a width on floated elements.

Upvotes: 2

Related Questions