Common CSS Headaches with Solutions
By: Dino Cajic
Tags: CSS, Web Design, Programming, Website, Web Development

Let me begin by saying that I am a web-developer, not a web-designer. I’ve found that throughout my journey, someone has created what I’m looking for and they’ve done it better than I could have imagined. Normally they have the HTML/CSS readily available for you to tinker with and modify. However, there are a few things that still remain a mystery to quite a few people since I see the same types of Stack Overflow questions emerging each year.

Another problem that I’ve encountered is that most designers want to show how brilliant they are and will include an unnecessary amount of CSS inside of their stylesheets. You quickly realize that most of it is fluff.

What we’ll cover in this article:

Block vs Inline Elements

Built in Margin

Full Page Container

Full Height Banner Underneath the Navigation

Centering Content in Banner

Aligning Content in Banner

Full Height Background Image

Box Model

Box Sizing

Banner Image Fixed while the text is moving

Making Background Image Darker

Fitting Image to Container

Let’s walk though some painfully simple examples with no fluff. This article will be updated whenever I find something else that people seem to struggle with.

Block vs Inline Elements

Have you ever tried to add margin-top to an anchor tag and it just doesn’t work? That’s because margin-top is a property of a block element like a div tag. Here’s a list of all the block elements:

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

Here’s a list of all the inline elements:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

According to W3, Margin properties specify the width of the margin area of a box. The ‘margin’ shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.”

If you really want to add margin-top to an inline element, you could achieve this in a couple of ways. You could treat this element as a block or an inline block. The block will span the full width of the screen, while the inline block will span the necessary amount of space around the inline element.

The example above creates a link with a red background so that you can see that the top margin had no effect on the anchor tag.

If we modify the anchor tag to a block element, it will span the full width of the window, but the margin-top property will work.

Finally, if we don’t want the anchor tag to span the full width of the window, we can just use inline-block as the display option. The margin is still in effect, but the width is contained to the element.

Built in Margin

The browser has built in margin. If you want your navigation to appear at the top of the screen and expand from left to right without any margin, you will first have to remove that margin.

Let’s create a div element and give it a background color of red. You’ll quickly see the margin that appears all around it.

Let’s remove the built in margin for the body tag.

And just like that the margin is removed. Most of the time you’ll see that the margin is removed from both the body and the html tags.

If you want to remove the built in margin from all tags, you could use the * symbol.

Full Page Container

Have you seen those full page banners and wondered how in the world they do it? Well it’s actually pretty simple. For this example, we’ll first need to remove the inherent browser margin and create a div element.

We can use the view-height and view-width units for our width and height properties. Since this is a block element that already takes up the full width of the browser, we just need the height property. We’ll set the height to 100 view height which will take up 100% of current browser height.

You can add other div tags underneath with the same view-height property and you’ll have full window height sections.

Even if you resize the window, it will still take up 100% of the available real-estate. I added the red-banner and blue-banner classes to show the differences.

Full Height Banner Underneath the Navigation

If you have an element at the top, like the navigation bar, and you attempt to add a full height banner underneath, you’ll see that it actually takes up a height that’s larger than the available space. If your window is 800px high, but the navigation bar is 100px high, the 100vh is going to see the height of the container to 800px. Let’s take a look at that before we look at the solution.

You can see that the scroll-bar appears meaning that the height is larger than the available screen size. If we scroll down, you’ll see that it’s just enough to eliminate the navigation bar.

In order for the banner to take up 100% of the available screen space, we have to subtract the navigation bar height from the 100vh. So, we can use the calc() function to help us out with that. We can see that the navigation is 50px high, so let’s subtract 50px from 100vh: calc(100vh - 50px) . Make sure that you have a space before and after the subtraction operator or it’s not going to work.

And just like that, the scroll bar is eliminated.

Centering Content in Banner

We’ll continue with the example above. Let’s say that we want that Banner text to be centered inside of our div tag. The simplest solution is to convert the banner div into a flex-box and use the justify-content and align-items properties. Setting the justify-content to center will horizontally align the items to the center of the screen and setting align-items to center will vertically align the items.

This doesn’t have to be text. You could have other elements inside of the div tag and align those. We’re going to add an inner div to the banner div. This inner div will be red and will have a heading and a subheading and will be centered on the page. I’ll remove the navigation from this example to clean up the fluff.

As you can see, the inner div is centered, but its content is not centered. Since we just have text inside of it, we could use the text-align property and set it to center, or we could use flex like we did in the banner div. We’ll use the text-align property for this example.

Remember that text-align will only align the text horizontally. If you set the height of your inner div to something larger, you will need to use the flex method to center the items vertically. The only problem is that once you use flex, it will align the items horizontally.

To center-align them vertically again, you’ll have to set the flex-direction to column; it’s set to row by default.

Aligning Content in Banner

Let’s transition to aligning the content of the banner (instead of just centering it). I’m sure that you can probably figure it out from the examples above, but let’s look at it anyway. Let’s work with the example from above (slightly modified to remove fluff). This example shows a banner with an inner div that has been centered on the screen.

To align the inner div to the bottom right hand corner, we could just modify the justify-content and align-items properties. We’ll set both to flex-end.

To move it to the top right, let’s use flex-start for the vertical alignment.

I’m sure you can figure out how to do the top-left and bottom left configurations. We can also add a little bit of margin to the inner div to separate it from the edge.

To see the full list of options that you can experiment with, check out the docs.

What if we want to be very specific? For example, I want my inner container to be 12px from the right and 27px from the bottom? We can do that to. We’ll just want to make sure that the inner container is positioned absolutely. We can then set the top, right, left, and bottom properties.

Full Height Background Image

Once you get some of the basics down from above, it should feel pretty natural to add background images and then some text on top of them. Let’s continue working with the example above.

To begin, let’s again recreate the full height banner with a centered inner div element.

Let’s modify the background color from blue to an actual image. I’m going to get an image from Pixabay.

Remove the background-color property and replace it with the background property. Point the url to the path where the image is saved. Since my image is in the same folder as my file, I can just add the image name to the url() function.

If I resize the browser, it’s actually showing the top left of the image. I want it to resize around the center of the image. We can achieve that with the background-position property.

This works out great if the image is large, but what if the image is not that large? Let’s take a look at a smaller version of this image.

It doesn’t quite look like we envisioned. Most of the time, we just want to stretch the image to fill up the space. Let’s start by getting rid of the repeating. We’ll set the background-repeat property to no-repeat.

Unfortunately we now have a bunch of white-space around it. The reason that it’s in the center of the screen is because of the background-position property that was set earlier to center. Let’s stretch the image to fill up the space of the container. We can do that by setting the background-size property to cover.

Depending on your screen resolution and image quality, the image might look blurry. How blurry is acceptable? That’s for you to decide.

Let’s quickly add the navigation back to the top and remove the height of the navigation from the overall background container. The navigation text is aligned right and center and has a right padding of 20px. The overall navigation is 50px high therefore 50px has been subtracted from the banner container.

Box Model

I’m sure that most of you are sick and tired of hearing about the Box Model. It is important for the next section so I’ll just briefly talk about it here.

Washington.edu

Let’s create a div element and set the background color to red. The text that you see is inside of the content area.

The background-color property is applied to the content area as well as the padding area. Let’s add some padding to see that.

Let’s add a border to the div element.

And finally, let’s add a margin to the div.

It’s important to have this visual when we explore the next topic.

Box Sizing

Let’s see if you can guess this. If we have a div element with the following properties set, what is the height and width of the div element?

div {

height: 100px;

width: 100px;

padding: 10px;

border: 1px solid black;

}

Did you guess it? The height is not 100px, and neither is the width. They’re actually 122px each. How? Because of the way that box sizing works. Without the CSS box sizing property, the actual width and heights are calculated as follows:

Actual Width = width + padding + border

Actual Height = height + padding + border

So, actual width = 100px + 20px + 2px. Why 20px padding? Because we have the left and right padding. Why 2px border? Because we have a 1px border on the left and 1px border on the right.

This can make it tricky when we want to have our full page banner displayed on the screen. Let’s create a navigation and banner like we did before. The navigation will take up 50px in height and the banner will be 100vh - 50px.

Let’s add some padding to the navigation menu: 10px all around.

You can instantly see that a scroll bar appears. We can take two different approaches in fixing that issue. The first option is to subtract the 20px that were added by the padding. In our banner container, instead of subtracting 50px, let’s subtract 70px.

The other option is to redefine how we calculate the width and height of the container. We can add the box-sizing property and set it to border-box. What this tells the browser is that the 50px height we just set should be the height that we’re looking at. The padding and border should be encompassed inside of that 50px. Once that’s set, we can go back to normally subtracting the 50px from the 100vh to achieve the banner that takes up 100% of the available real-estate.

Banner Image Fixed while the text is moving

Have you ever seen those pages where you start scrolling down and the image is fixed while the text is moving for that particular section. It’s again pretty simple to achieve. Let’s create a page with three div elements.

The first and third div will have a salmon background color while the second div will have a background image. The background image is just to help visualize this process even further.

Each div will also have a p tag with some text inside of it. The p tag will be blue and will have some padding.

Each div will be 100vh in height.

Each p tag inside of each div will be centered on the screen.

We’ve done all of this before. There shouldn’t be anything that frightens you.

First <div>

Second <div>

Third <div>

For those of you panicking, let’s walk through the CSS quickly. Any time that a property repeats between the div’s, I separated it out. For example, we’re going to set the height to 100vh for both the banner and banner-fixed classes, so I grouped them. Everything else should be self explanatory.

Let’s see what happens when we scroll down the page.

So far it behaves like a normal webpage that we’re used to seeing. The content and the background image of the second div move together. Let’s change that by fixing the background image of the second div while the content moves. We can achieve that by setting the background-attachment property to fixed.

Making Background Image Darker

If you have a banner image and you want the text to pop, you may want to darken the background image. To achieve this, let’s create a banner and add some text to it. We’ll center the text using flex and will make the font white and bold. This will actually look pretty decent.

If we want to make the image slightly darker, we can apply a linear gradient with 50% opacity to start with and increase it or decrease it from there. The linear gradient is applied to the background property.

Fitting Image to Container

You might have run into this issue before. You have a container and you have an image inside of the container. The image is too large for the container so it escapes out of the container.

We can use the overflow property and set it to hidden. To center the image, we can use flex.