For a long time CSS was really confusing to me. I was shocked after every line of code I wrote. Text flowed outside its container, things didn’t position themselves like I expected, and elements I expected to be center sat on the left side of the page. These problems left my CSS with !important declarations and hacks to make things look right. This is my post that would have taught past me how to fix those mistakes and where to get more information. Maybe you have the same problems and this post will help you too.

Height

The other day a friend asked me why part of the text in one of his text inputs was hidden. He accidently set a height on his <input> elements. This isn’t a problem unique to first-time front-end developers. It feels good to set a height on elements. However, setting an explicit height can cause trouble later if you’re not careful.

First, let’s take a look at my friend’s example with the input (note that you won’t notice anything wrong in Chrome or desktop Safari, but keep reading).

To understand what is happening we need to get into the box model. If you’ve never heard of the box model, stop and read The CSS Box Model on CSS-Tricks. When content is driving the size of the box, padding, border, and margin are calculated based on the edges of the content.

See the Pen Normal Box by Ben Joyce (@benjoyce) on CodePen.

Setting an explicit height ignores the content and will make the box the size set in the CSS. I didn’t change the padding, border, or margin from the previous example. I did add a height. You can see that the content is now overflowing from the box (that is because the default is overflow: visible). Additionally, the bottom border and the bottom margin are being calculated based on the new position of the bottom of the box.

See the Pen Height Box by Ben Joyce (@benjoyce) on CodePen.

But let’s say you know you need something to be a certain height. There are a few options. First, you can use the overflow property. Setting overflow-y to scroll might be a tempting solution in our example above. This solution should be avoided in most situations. Imagine scrolling down a webpage only to be stuck in a content box that has its own scroll. An answer by alexeypegov on UX StackExchange has some good examples of when it might be okay to use overflow-y: scroll:

  1. You may use nested scrolling panes if they're shown temporary (like in Facebook example you've mentioned in your question: the scrolling list in popup which is shown for a moment and will not break the page scrolling itself).
  2. Editable areas like comments may be scrolled while being edited (and reverted back to non-scrollable mode then editing is done).
  3. Web apps which may occupy the whole browser window and avoid scrolling of the content by using dynamic layout so it's OK to use nested scrolling panes (since main content area could never be scrolled anyway).

Besides overflow, flexbox solves many challenges developers have with height. For example, equal height columns can be done with only one line of code.

See the Pen Equal Height Columns by Ben Joyce (@benjoyce) on CodePen.

You can also consider letting the height be driven by the content. The W3C specs are basically written to support content-driven boxes. Letting the content drive the height will save you many headaches down the road.

Finally, you can set a height that fits your content. The most important thing is being intentional with height. Knowing how setting a height will affect your site is powerful knowledge.

Position

Document flow is tied with the box model for the CSS concepts I think are most important. Tuts+ has a great article on normal document flow, Quick Tip: Utilizing Normal Document Flow. In the article they describe normal document flow as

[H]ow a page is presented when you do nothing to it with regard to structural styling.

The first web page is a great example of normal document flow. You can see that nothing sits on the same line as the <h1> of the page. The default display value for a <h1> is block. The inverse is true for the <a> tags that appear within the first paragraph. <a> tags have a default display value of inline.

Confusion can occur when things are both in the normal document flow and outside of it. Not understanding this property may result in undesirable results. For example, you will be disappointed if you add an absolutely positioned logo at the top of the page and expect your navigation to sit next to the logo.

See the Pen 30cff6e84d84ee78728ad4509720fe37 by Ben Joyce (@benjoyce) on CodePen.

Whoops, why are things sitting on top of each other? Well, elements in the normal document flow are ignoring the heart logo since it was taken out of the normal document flow.

Guil Hernandez’s course on Treehouse, CSS Layout Techniques is one of the best explanations for layout complexities that I have come across. Treehouse costs a few bucks a month, but it worth the price of admission. Consider taking his course if you find stuff isn’t laying out like you want.

Center Alignment

Center alignment was one of those things that I had to look up every time for a long time. Not even vertical alignment, which can be solved in three lines or by flexbox. There are a bunch of techniques for centering. Each is used for different situations.

There are four basic ways to horizontally center items:

Here is everything in action:

See the Pen 3b11a5a3f76e7b2c461fc72406647957 by Ben Joyce (@benjoyce) on CodePen.

For more on centering, check out Centering in CSS: A Complete Guide on CSS-Tricks.

Conclusion

Even the most simple display tasks can be difficult in CSS. Don’t worry if you have to look up how to do something once or twenty times. Everyone is learning together. Visit the sites I link to throughout this article if you’re having any of these problems. Or contact me on Twitter @BenJoyceCT and I can try to help. Let me know if you notice any issues with the article. Best of luck!