6.4 CSS height and width

The dimensions (or height and width) of an element are dynamic, as they fluctuate in order to fit the content. It is somehow possible to set specific dimensions.

blockquote{ width: 600px;}

The blockquote will not take up the whole width available, but will remain 600px wide in any situation:

• if the browser window is less wide than 600px, it will show a horizontal scrolling bar
• if the browser window is wider than 600px, the blockquote will stay 600px wide and not take up the whole space

Because we’ve only set the width, the blockquote remains fluid in height: the height becomes the variable dimension to fit the blockquote’s content.

Setting both height and width

By setting the dimensions of an element, it will remain fixed no matter the length of its content.

What happens if the content is longer than the element can contain?

Because we prevent the element to dynamically alter its dimensions, there is a chance the content will be longer than the element accomodates for and will subsequently overflow.

The default behavior can be surprising: the content will be displayed anyway!

blockquote{ background: yellow; height: 50px; width: 100px;}

<blockquote>The content er... finds a way</blockquote>

CSS overflow

The overflow CSS property allows us to manage the case of content being longer than its container.

The default value is visible: the content will be displayed anyway, because “Why would you want to prevent content from being read by the user if it’s present in the code?”. You can consider HTML as prevalent to CSS.

By applying overflow: hidden;, you simply forbid any overflowing content to be seen.

If you want your content to overflow but still want to make it accessible, you can decide to display scrollbars by applying overflow: scroll.

A better option is use overflow: auto, as the scrollbars will only appear if the content is overflowing, but will remain hidden until then.

Beware of fixed dimensions

Applying specific dimensions are often required for a design to look visually appealing but can have unintended consequences. In that regard:

• make sure your content doesn’t overflow
• if it does, use overflow: hidden or overflow: auto to prevent your design from breaking