HTML & CSS

AtoZ CSS Quick Tip: Using Hover and Height

Guy Routledge
Share

This article is a part of our AtoZ CSS Series. You can find other entries to the series here
View the full screencast and transcript for Hover here.

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) beginning with a letter of the alphabet. We know that sometimes screencasts are just not enough, in this article we’ve added a new quick tip about Hover for you.

1H-01

H is for Hover and Height

There’s not too much more I can say about Hover that I haven’t already covered in the video about the letter H. However, there are some cool animations that you can apply for a hover state. Google “CSS hover effects” and you’ll find plenty.

Here are a couple of sites that have some nifty effects:

Further to those, I recently produced a video for Code School, all about a library called hover.css.

Another CSS H (that I haven’t gone into much detail about on this site) is height.

The height property is used to define the content height on a containing element. All the standard length units (like px, em, rem, %, vw, vh and others) can be used to control height.

If the height of an element is not specifically set, it’s calculated as the minimum height to hold all the containing elements (corresponding to the default value auto).

It’s generally advisable to avoid explicitly setting a height on any elements as it restricts the flexibility of the element – meaning it can’t grow as the content changes. This is particularly risky when working on a responsive design when content needs to reflow vertically as the available width changes.

As such, I tend to only set height on elements that have predefined dimensions – like images. Another use case is when using absolute or fixed position as height (and width) shrink wrap around positioned elements.

Here’s an example that demonstrates the problem with setting a fixed height.

See the Pen The height property by SitePoint (@SitePoint) on CodePen.

While the first set of text looks styled correctly, as soon as the text is shorter or longer than the styling no longer looks correct – the containing box appears too big, or the text flows outside the box.

A solution to the overflowing text could be to use the overflow property, but this cuts off the text and makes it unreadable.

This situation could be completely avoided by not specifying the height in the first place. If I can improve the flexibility of my code without doing anything at all, that gets my vote!