CODEWITHSUNDEEP
htmlcssresponsive-designoverflow
Amanda
Amanda

Reputation: 89

Is overflow:hidden to fit a width a hack - is there an alternative?

Is overflow:hidden to fit a width a hack? We have a responsive website that uses overflow:hidden in conjunction with width:100% to set the layout properly. However, any new feature that we add has issues.

For example, we implemented a custom html drop down. The drop down is partially hidden when expanded outside the container.

Is there a proper way to get this to work without having to redo the styles for the entire page?

The behavior I'm trying to describe is used in #4 in this article http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design/comment-page-2

Upvotes: 1

Views: 2034

Answers (1)

SW4
SW4

Reputation: 71150

The purpose of overflow:hidden is not to clear floats per se, but to control child content containment by establishing a new block formatting context(BFC) flow root, one feature of BFCs is float containment.

More on BFCs from MDN

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

Technically the way to clear floats is to use clear, this will also mean you dont have to rely on using overflow:hidden thereby removing your menu cropping issue.

You can, for example, have an element after your floated elements with clear set on it - another alternative would be to use a clearfix (also, here). A clearfix uses a psuedo element to apply the relevant clear.

More on clear from MDN

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

[...]

The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

Upvotes: 3

Related Questions