- This topic is empty.
-
AuthorPosts
-
August 19, 2010 at 12:12 pm #29982Danny9Member
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 divworks 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 #81797Danny9MemberAhh, solved it!
goes in the html after the text
This works in ie6 I hope?
August 19, 2010 at 12:22 pm #81798Danny9Member<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 #81858rchParticipantFor better semnatics you should use the .clearfix method
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
like this:
(floating image + text content)
August 20, 2010 at 6:01 pm #79040noahgelmanParticipantYeah, 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 #81830rchParticipantOverflow 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 #81820Danny9Memberoverflow 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 #81814Danny9MemberYes 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.