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

.clearfix:after {
  content: ".";       //adds content
  display: block;     //block display makes it 100% of the width
  clear: both;        //clear puts the period below the divs children
  visibility: hidden;
  height: 0;          //bc height is 0, the div's height is set to the max height of its children
  line-height: 0;
}

A parent 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.

Clearfix Exercise

Make four 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

.wrapper {

  margin: 0 auto;

}

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 text-align: center;.

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.

1

overflow: auto;

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 div.

Wrapper Overflow Exercise

Create a 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;.

Good luck!