Jump to content
webcrab

Float and overflow relation

Recommended Posts

Hello everybody!

I'm having a hard time figuring out how floats work in conjunction with overflow. Say I have an unstyled <div> container that holds a 200 by 100 image. If I add a background color to the container it becomes clear that said container's height is exactly 100px. Then I float the picture and div's height shrinks to 0. Why? And what happens here exactly? Does the image get positioned, like, outside the container? It's as if the container doesn't hold the image anymore, and at the same time I suppose it's still in there. Yet it doesn't take up any space inside the container as it's height is now clearly 0 (no background color).

And then why does applying an overflow property fix this, so the div wraps around the picture again (background color is back on)?

This navigation menu example made me post my conundrum on here. When I remove the overflow property, the navigation portion gets stripped of its background color.

The dedicated chapter is absolutely clear to me, but I still can't get why this property has the effects it has in my case.

Thank you for taking the time to read :)

Share this post


Link to post
Share on other sites

Its always done that! Any floated element placed  within a container element has no substance, so the container will collapse to height 0. Using property overflow reverses that condition for the container element.

  • Like 1

Share this post


Link to post
Share on other sites

Thank you so much for your reply dsonesuk!

Even though it's weird how I've never come across (or failed to notice) this important aspect of the overflow property -- that it restores a floated element's height. Is that what I should understand by what you refer to as substance?

Again, I appreciate your help!

 

Edit: Also, somewhat unrelated question, but I don't feel like it deserves a dedicated thread. Suppose I have a div container and some text in it that doesn't have any tags surrounding it like so:

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sed viverra ipsum nunc aliquet bibendum enim.
</div>

Does the text get wrapped in any tags by default when rendered by the browser proper?

Edited by webcrab

Share this post


Link to post
Share on other sites

The height of floated element is always there the ability for the container element to detect that height is the problem.

ALL  except elements using position: and specifically absolute or fixed will not wrap the text, however with some browsers when you don't use properties left, right, top, bottom which are usually used alongside position: and would be set as 'auto' by default will.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...