Expanding Div to contain image

[Danny9]

This must have been asked a million times already over the years but I’m not having much luck finding a easy to understand answer. If the answer is anything to do with clearing floats then I’m not sure where exactly the clear command goes.

I have a div class = "box"

insert an image into div, float left (cheer wildly!)
insert some text into div

works fine with lots of text as the div gets big enough but if there’s only a few lines of text the image pops out the bottom of div (booo!)

need div to say: "Woah! Let’s expand so both the pic and the text are inside"

(ie 6 friendly solution would be cool)

[Danny9]

Ahh, solved it!

goes in the html after the text

This works in ie6 I hope?

[Danny9]

<div style="clear: both;">&nbsp;</div>

Was around years ago when I first started dabbling with css. Is it still the done thing as I remember that while it worked it wasn’t see as good practice in terms of good markup.

[rch]

For better semnatics you should use the .clearfix method

http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

like this:

(floating image + text content)

[noahgelman]

Yeah, I’m pretty sure overflow:hidden; is pretty much the standard. Not sure why would would go any other route.

[rch]

Overflow hidden works great, but in some cases you can´t use it, i.e in an ul with dropdown menus, the child items will not dropdown. And if the container of floating things doesn´t have any haslayout trigger, in IE won´t work either until you aply something like zoom:1;
Most time, overflow hidden or auto will help, but is good to know other ways for some special issues.
For some reference you could visit using any IE version this link:

[Danny9]

overflow hidden would chop off the bottom of the image if it sticks out of the div though, right?

[jamygolden]

‘<div style=”clear: both;”> </div>’

@Danny9 The & nbsp; is unnecessary, you could just use <div style=”clear: both;”></div>

[Danny9]

Yes I’ve used that as well Jamy – just get worried if these things ain’t proper. Been away from HTML and CSS for several years so trying to catch up with latest trends and best practices.

[Rob MacKay]

@Danny9 lots of people actually just do this
and then assign the clear in the stylesheet removing margin from the BR tag – then you don’t need another div and it self closes.

[jamygolden]

@Robskiwarrior I’ve noticed that it doesn’t always work in IE6 or 7. It works most times but I end up using 80% br-clears and 20% div-clears lol

[Author]

Posts