Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Expanding Div to contain image

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #29982
    Danny9
    Member

    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)

    #81797
    Danny9
    Member

    Ahh, solved it!

     

    goes in the html after the text

    This works in ie6 I hope?

    #81798
    Danny9
    Member

    <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.

    #81858
    rch
    Participant

    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)
    #79040
    noahgelman
    Participant

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

    #81830
    rch
    Participant

    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:

    #81820
    Danny9
    Member

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

    #81821
    jamygolden
    Member

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


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

    #81814
    Danny9
    Member

    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.

    #81796
    Rob MacKay
    Participant

    @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.

    #81723
    jamygolden
    Member

    @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

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.