Floating and Wrapping

[davej]

I have not messed with float for awhile and now maybe I've forgotten some of the details. How do you set the vertical position of an image that will be floated so that text will wrap around it but that the paragraph will begin above the image? As it is the paragraph and image seem to begin at the same vertical position. Or what if you wanted to lock your images at a certain spacing or certain number of lines between them and then allow text to float around them? Thanks

[dsonesuk]

paragraph is block element, float image won't merge with block element above them, but! block elements will merge or wrap round floated element above them.So place float image below 1st paragraph block element, , paragraphs after the image will wrap. I think that what your referring to.

Edited March 21, 2013 by dsonesuk

[davej]

Yes, that is basically what I'm doing -- following an image with a paragraph -- but float is so non-intuitive it is quite annoying. If I tell the image to float left and the next paragraph to float right they refuse to wrap. However if I tell the image to float and tell the paragraph nothing then the paragraph wraps against the image beginning at the top corner of the image. That has always been good enough for me -- but if someone demanded that the image occur in the middle of the paragraph I would not know what to do.

[dsonesuk]

Float elements won't wrap, if the content of either exceeds beyond the width of parent that can occupy both. The floated paragraph below image will position itself below the image, and you will find the next non-floated paragraph block element, will move up and wrap image instead. Remember non-floated elements MUST be below floated for the wrap to take place. options(1)image outside paragraphs

<p>Sed do eiusmod tempor incididunt quis nostrud exercitation in reprehenderit  in voluptate. Duis aute irure dolor eu fugiat nulla pariatur. Ut aliquip ex  ea commodo consequat. Velit esse cillum dolore quis nostrud exercitation lorem  ipsum dolor sit amet. Duis aute irure dolor consectetur adipisicing elit, ut  aliquip ex ea commodo consequat.</p>  <img src="http://www.w3schools.com/cssref/smiley.gif" alt="" style="float:left; ">  <p>Sed do eiusmod tempor incididunt quis nostrud exercitation in reprehenderit  in voluptate. Duis aute irure dolor eu fugiat nulla pariatur. Ut aliquip ex  ea commodo consequat. Velit esse cillum dolore quis nostrud exercitation lorem  ipsum dolor sit amet. Duis aute irure dolor consectetur adipisicing elit, ut  aliquip ex ea commodo consequat.</p>  <p>Sed do eiusmod tempor incididunt quis nostrud exercitation in reprehenderit  in voluptate. Duis aute irure dolor eu fugiat nulla pariatur. Ut aliquip ex  ea commodo consequat. Velit esse cillum dolore quis nostrud exercitation lorem  ipsum dolor sit amet. Duis aute irure dolor consectetur adipisicing elit, ut  aliquip ex ea commodo consequat.</p>

(2)image within paragraph

<p>Sed do eiusmod tempor incididunt quis nostrud exercitation in reprehenderit  in voluptate. Duis aute irure dolor eu fugiat nulla pariatur. Ut aliquip ex  ea commodo consequat. Velit esse cillum dolore quis nostrud exercitation lorem  ipsum dolor sit amet. Duis aute irure dolor consectetur adipisicing elit, ut  aliquip ex ea commodo consequat.</p>   <p>Sed do eiusmod tempor incididunt quis nostrud exercitation in reprehenderit  in voluptate. <img src="http://www.w3schools.com/cssref/smiley.gif" alt="" style="float:left; ">Duis aute irure dolor eu fugiat nulla pariatur. Ut aliquip ex  ea commodo consequat. Velit esse cillum dolore quis nostrud exercitation lorem  ipsum dolor sit amet. Duis aute irure dolor consectetur adipisicing elit, ut  aliquip ex ea commodo consequat.</p>  <p>Sed do eiusmod tempor incididunt quis nostrud exercitation in reprehenderit  in voluptate. Duis aute irure dolor eu fugiat nulla pariatur. Ut aliquip ex  ea commodo consequat. Velit esse cillum dolore quis nostrud exercitation lorem  ipsum dolor sit amet. Duis aute irure dolor consectetur adipisicing elit, ut  aliquip ex ea commodo consequat.</p>

For inserting image at specific paragraph you could use content, but i'm not to sure about it working in all browsers.

p:nth-of-type(2):before                            {content:url(http://www.w3schools.com/cssref/smiley.gif);float:right;}  p:nth-of-type(2):after                            {content:url(http://www.w3schools.com/cssref/smiley.gif);float:right;}

[davej]

Oops. Thanks. I did not consider the obvious solution of placing the image inside the paragraph. Duh.