/    Sign up×
Community /Pin to ProfileBookmark

Why do block elements not wrap around elements with the "float" property at times?

Copy linkTweet thisAlerts:
Dec 18.2010

Sometimes, when I have an element that has float:left, it’s parent element does not wrap around it. The parent element has a height and width of 0px. It behaves as if the element with the “float” had position:absolute.

Why is this?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@aj_nscDec 18.2010 — Because floated elements are, somewhat, like position: absolute elements - they are taken out of the normal flow of the document. This used to be a heck of a problem several years ago when everybody was scrambling and scratching their heads for fixes (the fix has been fairly common knowledge now for a while). The solution is simple: apply the following rule to the parent of the floated element:

<i>
</i>overflow: hidden;
Copy linkTweet thisAlerts:
@narutodude000authorDec 19.2010 — Thanks! That fixed some of my errors. However, there's still an odd error that I can't fix.

Open http://linksku.com/10/share-post-wordpress-plugin and look at the two links above the title of the link. Then, go to http://linksku.com/10/share-post-wordpress-plugin#comment and look at the same links. Only half the link is showing, the top half is cut off. I have no idea whats wrong. I tried adding overflow:hidden to the parent element, but it doesn't work.
Copy linkTweet thisAlerts:
@aj_nscDec 19.2010 — that's thanks to the styles on clear-block::after (supposed to be only one :, by the way)

If you get rid of height:0 and line-height:0 then it works....but it screws up a lot of other hacked css classes on your site.
Copy linkTweet thisAlerts:
@narutodude000authorDec 19.2010 — It still does not work. There's only one ":" in my CSS. I might start a new thread on this.
×

Success!

Help @narutodude000 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...