ansaurus

Question

A floated image does not count toward DIV width, how can I make it so?

Answer 1

A:

Float the wrapping div to the left as well and it'll wrap the content correctly:

<div style="float: left;">
    <img src="" style="float: left;">
    <p>Lorem Ipsum...</p>
</div>

This is not a perfect solution as floating the wrapping div has obvious side-effects, but it's a sure-fire way of ensuring that a div wraps floated content correctly.

If floating the div gives you any problems you can wrap it in another div which should resolve the issue.

Chris Pebble 2010-02-05 19:09:30

Answer 2

A:

Fails cause float:left requires explicity width

2010-02-05 19:20:38

Answer 3

A:

There is a number of things that can be going on here. When I put your code inside of the body tags of a HTML page with no other code it works fine. This could be because of your page type definition. Mine is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >

It also could be because you have a containing that is forcing this div to become shorter. The only way to be sure you solved the issue is to force your area to be of a specific width by setting it's width style. Changing the Div tag your code is in to have a style of float:left most likely does not solve your problem. I checked it just to be sure myself and it didn't produce the results you desired.

RandomBen 2010-02-05 19:26:39

Answer 4

A:

Aside from floating the containing div, you can also add a "width: 100%; overflow: hidden;" style to the containing div. This will force it to expand to contain the floated div. See here for more discussion.

technophile 2010-02-05 19:52:24

Answer 5

+1 A:

Floated elements are removed from the flow of the page and will not cause the enclosing elements to expand.

Take a look here. That tutorial talks about enclosing floated elements by using the overflow property.

Vivin Paliath 2010-02-05 19:55:22

Answer 6

A:

You should also make sure that the element displays as block:

img#my_element {display:block;}

Joseph Silvashy 2010-02-05 19:56:33

ansaurus

tags:

views:

answers:

A floated image does not count toward DIV width, how can I make it so?

related questions