CSS Positioning Essentials: Clearfix, Wrapper, and Overflow
To stop a
div from taking the wrong spot, use these 3 standard CSS tricks to stay in control.
Clearfix for Pro Positioning
Sometimes you want your parent div to have a height, but it collapses to zero height when its children div float left. To give it a height, use the clearfix solution (note that clearfix is used for block elements, and not inline-block elements, which requires other fixes if you want to use it).
1 2 3 4 5 6 7 8
div collapses because its height is determined its contents, but floating its children divs effectively makes it empty. The clearfix class is a signal to the parent
div that it is not empty. It accomplishes this feat by actually adding html content, in this case, a period, which acts as a ruler for the parent
div letting it know how tall its chidlren are.
divs: one parent
div, and three children
div as its contents. Give the 3 children
div a height and width, then float them left. Verify that the parent
div has collaspsed to a height of zero. Finally, give the parent
div a clearfix class to give it a height.
Wrapper for Simple Centering
It’s common to limit the width of where your main site’s content appears. Furthermore, you want that container for your text to be centered within its parent
div, the most common case being the browser window. By implementing a wrapper class, you can arbitrarily make any
div centered within its parent
div by surrounding it with a
div with the wrapper class.
1 2 3 4 5
This works by setting the left and right margins to be automatically set by the browser as equal, which centers that
div’s contents, as long at they are also block elements. If you want to center the text of an element, use
Overflow for Stabilizing Div Areas
When text is generated dynamically, such as a user-written bio written on her profile, your design could require its containing
div to be less than a specific height. But if a user writes a very long bio, that text content would break out of your
div and compromise your design.
One solution is to simply limit the amount of text that a person can enter into the bio. Another is to limit the number of characters that can be displayed in the view. The third solution involves the overflow css property.
Overflow auto generates a side scroll in your
div when its contents are larger than the
div’s desired size. You can also use
overflow: hidden; to stop oversized contents from being displayed outside of its container
Wrapper Overflow Exercise
div with a fixed width and height. Give it contents that go outside the
div. Then use the overlfow property to keep the contents inside the
div. Next, give that
div a wrapper class with a css rule
margin: 0 auto;.