Geek Answers Handbook

Wrapping text inside a float

I would like to display floating images with the caption below. But, using the code below, the signature text does not wrap, which means that the floating image with the caption takes huuuuuge the amount of horizontal space.

If you have a better way to have a caption image, I will do it over any improvements to this code. Otherwise, how can I get the text inside the float?

I tried looking for this, but could only get results for wrapping AROUND float text, not inside.

Added: I would prefer not to set an explicit width for the float, since I would have to do this for every image I have ever used.

Full XHTML ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <title>Test</title> <style type="text/css"> p.img-with-cap { float: left; } </style> </head> <body> <p class="img-with-cap"> <a class="img" href="http://sohowww.nascom.nasa.gov/"> <img alt="Sun" src="http://www.heeris.id.au/sites/default/files/sun.gif" width="256" height="256" /> </a> <br />The Sun - a sinister and destructive force. Image from <a href="http://sohowww.nascom.nasa.gov/">SOHO website</a>. </p> <p style="font-size: 200%">The Sun is a star located at the centre of our solar system. It is classified as a G2 star, has a mass of about 2×1030 kg, a temperature of 5800 K at the surface and a core temperature of 15.6 million Kelvin. It constantly emits electromagnetic radiation over the entire spectrum (indeed, it can be modelled as a black body), peaked at the wavelength corresponding to that of green light.</p> </body> </html>
+4
source share
2 answers

Block-level floating-point elements can have a width applied to them. I would suggest that the following style should prevent wrapping:

 p.img-with-cap { float: left; width: 200px; /* or whatever */ }

If you do not want to use a specific width, but want it to match the width of the image, you can set the width dynamically when the window loads, for example:

 function setWidth() { var width = document.getElementById("imgElement").width; document.getElementById("wrapperElement").style.width = width; } window.onload = setWidth;
+2
source

Floating elements, like any other element of the block, will occupy the same width as necessary to match their contents - up to 100%.

If you want it to be already 100%, give it the property width: ____; .

+1
source

More articles:


All Articles