ansaurus

Question

Answer 1

+1 A:

Floated elements, just like any other block element, will take up as much width as necessary to fit their contents — up to 100%.

If you want it to be narrower than 100%, give it a width: ____; property.

VoteyDisciple 2010-08-16 13:33:30

Answer 2

+1 A:

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

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

If you don't want a specific width, but want it to match the width of the image, you could set the width dynamically when the window loads, like so:

function setWidth() {
    var width = document.getElementById("imgElement").width;
    document.getElementById("wrapperElement").style.width = width;
}

window.onload = setWidth;

Ryan Brunner 2010-08-16 13:34:07

Not a fan of setting the width (see updated question). Is there really not a generic way to do this then?

detly 2010-08-16 13:53:28

The best option I can see is to set the width via javascript once the image has loaded (you'd likely want to set the width to a reasonable initial value as well). I'll update my answer.

Ryan Brunner 2010-08-16 13:57:40

That's not a bad idea. I find it a little strange that such an obvious use case isn't covered by CSS, but I'm sure it's not the first time someone's said that.

detly 2010-08-16 14:07:39

Used jQuery for the container resizing — it's trivial to loop over containers with that class and do the width detection and resizing.

detly 2010-08-17 00:54:29

ansaurus

tags:

views:

answers:

Wrap text inside float

related questions