Troubleshooting CSS

Quick Solutions to Common CSS Problems

Working on CSS and getting good at it are two different stories. CSS is easy to learn but mastering is little difficult. It’s something which takes a minute to get familiar with and maybe a lifetime(with exaggeration) to master! The two hardest parts of CSS are debugging & browser wars which make it really frustrating.

So today, among all the CSS issues here I have picked some really common yet annoying ones that almost every programmer faced at least ones.

  • Clearing float
  • How to fight inline-block spacing?
  • Vertical centering- an old battle
  • Equating heights of adjacent divs
  • Truncating string with ellipsis

PROBLEM #1 Clearing float

I think this has to be the most common problem of CSS. I’m one hundred percent sure that every single person who has ever coded CSS fell into this trap.

The whole problem is that floated objects do not add to the height of the object that resides in it. As you can see below, the divs with the class ‘child’ are within the div ‘parent’, yet on the page they are outside that container div. In other words, ‘parent’ div collapsed in itself. Collapsing almost always needs to be dealt with to prevent strange layout and cross-browser problems.

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
.parent {  
width: 400px;
margin: 20px auto;
padding: 5px;
background: #7060c4;
}
.child {
float: left;
width: 100px;
height: 100px;
margin: 10px;
background: #cccccc;
}

Solution:

To fix this all we need to do is clear the float, and this entire problem goes away. There are certain method for clearing float. I’ll explain one by one.

Method #1 (Empty div method)

Add an empty div with “clear: both” at the bottom of the container.

For ex:

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div style="clear: both"></div> <!--empty div-->
</div>

This fix does add some useless markup but it’s an easy cross-browser fix that won’t let you down and gets the job done right and doesn’t hurt anybody.

We can also replace the div by a hr tag.

Method #2 (Without touching Markup)

Add class ‘clearfix’ to the parent element and add the following CSS in your CSS file.

.clearfix:after {
display: table;
content: " ";
clear: both;
}

If you are using Bootstrap you can simply add the clearfix class in the parent element to solve the problem. CSS is already written in bootstrap file.

PROBLEM #2 How to fight inline-block spacing?

Let’s continue with positioning elements on the same line, this time not by floating them but setting them as inline-blocks by using display: inline-block property.

  • Advantage — I think the main point of inline-blocks is we don’t have to deal with float clearing.
  • Problem — Problem is since they are half-inline, they are spaced from each other by the width of a blank character. With a default 16px baseline with a regular font, that is 4px. In most cases, it is about 25% of the font-size.
<div class="parent">
<div class="child">child #1</div>
<div class="child">child #2</div>
<div class="child">child #3</div>
</div>
.parent{
width: 600px;
background: #7060c4;
}
.child{
display: inline-block;
width: 200px;
height: 100px;
background: #cccccc;
}

Solution:

There are couple of ways to deal with these spaces that I’ll be explaining one by one.

Method #1 (Markup side Method)

Since they are half-inline, they are spaced from each other by the width of a blank character that’s why this doesn’t fit into a single line. So, the first way to fix the problem is to simply remove the spaces between divs.

<div class="parent">
<div class="child">child #1</div><div class="child">child #2</div><div class="child">child #3</div>
</div>

--OR--
<div class="parent">
<div class="child">child #1</div
><div class="child">child #2</div
><div class="child">child #3</div>
</div>
yeah!! its fixed

Method #2 (Without touching Markup)

2.1 Negative-margin method

One other way which is pretty similar to the previous one is the use of a negative margin. The main problem is that this fails in Internet Explorer 6 and Internet Explorer 7 which do not like negative margins. Plus, we have to remove the left margin of the first element to make our children perfectly fit into the container.

child {
margin-left: -0.25em;
}

.child:first-of-type {
margin-left: 0;
}

2.2 Font-size 0 method

You can try by setting the font-size of the parent to 0 to make the blank characters 0px wide, then restore it on the children.

.parent{
font-size: 0;
}
.child{
font-size: 16px;
}
None of these is a perfect solution. These are all hacks. Use flexbox to avoid these problems

PROBLEM #3 Vertical centering- an old battle

vertical-align can be a real scumbag at times. Working with it can be a little frustrating. There seem to be some mysterious rules at work. For example, it might happen, that the element you changed vertical-align for doesn’t change its alignment at all, but other elements in the line do!

So, let me try to enlighten the path to all the possible solutions.

Solution:

There are few ways to center align a item (either div or text) in a container vertically.

Method #1 (Line-height Method)

You just have to set line-height of the text equal to the height of the parent element. Easy solution but only works if you know that you’ll have one line of text , and the height of the parent element is known.

Method #2 (Table-cell Method)

The hard part comes in when you don’t know the dimensions of the element to be centered.

This involves making the parent element display:tableand the child display:table-cell, when you do that, you can just give the child vertical-align:middle

<div class="parent">    
<div class="child">
Unknown stuff to be centered.
</div>
</div>

.parent {   
display: table;
width: 100%;
}
.child {
display: table-cell;
text-align: center;
vertical-align: middle;
}

Method #3 (Transform Method)

Make the element to be centered relative. You just say top: 50% to make it go down 50% of its parent’s height. Of course then the element starts at the center, but you want the element’s center to be at the center. So you have to nudge it back by 50% of its own height.

.element-to-be-centered{    
position: relative;
top: 50%;
transform: translateY(-50%);
}

Method #4 (Flex Method)

Relatively new technology so has less browser support. Unless you’re supporting IE9 and under, Flexbox is perfect to use.

With Flexbox, you can stop worrying. You can align anything (vertically or horizontally) quite painlessly with the align-items, align-self, and justify-content properties.

Just add display:flexto parent element and align-items:center to align it vertically and justify-content:center to align it horizontally.

This is so far the best method to vertically align a element.

PROBLEM #4 Equating Heights of Adjacent Divs

One of the few things that isn’t as simple to do with CSS as it should be is creating columns of equal heights. A variety of methods do exist, each with its pros and cons and I want to present 2 most useful methods here.

Method #1 (Flex Method)

You just have to set display:flex to parent div & flex:1 to child divs to equate widths of the divs.

Method #2 (Table Method)

This involves making the parent element display:table and the child display:table-cell, remove floats and other display values.

You can also add border-collapse: separate; border-spacing: 10px; to parent div to add space between to divs

problem fixed

PROBLEM #5 Truncate String with Ellipsis

Sometimes you want to manually truncate your own text, but more often, you’d probably just like the presentation platform to automatically take care of this for you.

With the explosion of responsive-layout obsession around the web these days, the amount of space your text lives in has never been more dynamic (subject to change). More than ever before, we need good ways of signaling to a reader that there’s more (text) than meets the eye.

Most of the developers get stuck when it comes to truncate string.

Let’s quickly take a look at how we currently can accomplish this task, and possibly how we should be able to do it.

Method #1 (For single line text)

Quite awhile back, CSS added a feature to the text-overflow functionality that has CSS basically do what I suggested, which is automatically figure out how much text can be shown, and truncate with an ellipsis.

But, it never works alone.

To make it work you also have to specifically control the overflow of the parent container. So, you have to pick hidden or clip so that there’s a reason to ellipse. But it is a little annoying that you have to specify both overflow and text-overflow.

Also, the parent element has to have a specific width, or at least a max-width. It can’t be shrink-wrapped around your text content and growing without bounds, or again, it would be nonsensical to also ellipse text.

Lastly, and worst of all,text-overflow:ellipsis only works on a single line of text.

p{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

Method #2 (For multi line text)

Then there’s the webkit-only tricks which use something they call (-webkit-)line-clamp but it only works in chrome.

p{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

To the user, the Interface is the Product — Aza Raskin

If you liked the article, consider recommending it by clicking on the♡ below.

I’m Harshita from GeekyAnts. I DESIGN & BUILD web and mobile interfaces.