Harshita Maheshwari from our team has shared some solutions for the frequent issues that one faces while working with CSS.

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 you will get 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

It seems to be the most common problem of CSS and surely 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. All of them have been explained below:

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 — Probably 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 which are explained below:

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 just to get some idea to all the possible solutions read below:

Solution:

There are few ways to center align an 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:table and the child display:table-cell , when you do that, you can just give the child vertical-align:middle