- This topic is empty.
August 19, 2010 at 12:12 pm #29982
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)August 19, 2010 at 12:18 pm #81797
Ahh, solved it!
goes in the html after the text
This works in ie6 I hope?August 19, 2010 at 12:22 pm #81798
<div style="clear: both;"> </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.August 20, 2010 at 2:07 pm #81858rchParticipant
For better semnatics you should use the .clearfix method
(floating image + text content)
August 20, 2010 at 6:01 pm #79040noahgelmanParticipant
Yeah, I’m pretty sure overflow:hidden; is pretty much the standard. Not sure why would would go any other route.August 21, 2010 at 7:14 pm #81830rchParticipant
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:August 21, 2010 at 7:21 pm #81820
overflow hidden would chop off the bottom of the image if it sticks out of the div though, right?August 21, 2010 at 7:27 pm #81821jamygoldenMember
‘<div style=”clear: both;”> </div>’
@Danny9 The & nbsp; is unnecessary, you could just use <div style=”clear: both;”></div>August 21, 2010 at 8:22 pm #81814
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.August 22, 2010 at 7:58 am #81796Rob MacKayParticipant
@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.August 23, 2010 at 1:17 am #81723jamygoldenMember
@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
- The forum ‘CSS’ is closed to new topics and replies.