How to: CSS trick to overcome border problem in dynamic height columns

One of my colleague today, came out with one solution of giving border to different height columns.

The problem

If you have two different div’s one after other (float left) and either of them have different height or dynamic height , it is impossible to give border left or right to the tallest one.

Look at the figure:

The Solution

Rather giving borders to these div , concentrate on container having them. That means give background image to the container. Just use below line in css:

#container{background:#fff url(/images/border.gif) 400px 30px repeat-y;}

and here is the solution:

That’s it. You can adjust background image x(400) and y(30) positions as your design requirements.

Your comments are valuable please let me know if I have to refine it more.

Recently Published

»

5 Things to Consider When Designing A Logo For Your Startup

Designing a Logo is essential because it communicates your business. ...

»

What Is Access Control?

Access Control, When running a business, there are dozens of things ...

»

Process Management Solution For a Business

In order to be successful, a company needs to be on the same page and ...

»

5 Metrics You Should Track on Every Blog Post

As a blogger, you may have developed your blog with a variety of blog ...

»

3 of the Most Dynamic LMS Plugins for WordPress

The possibilities are limitless when you want to put a course online ...

»

Do You Really Need Access to Advanced Scripting Capabilities?

One of the features you’ll find most commonly advertised when ...

»

Obvious UX Trends that will Rule 2018

For web design industry, we see new UX trends in the way we build ...

»

Java Programming Language And Its Application

Programming language is one of the main IT developments of the past ...

»

Why Can’t I Add or Install Plugins in WordPress

WordPress is a great choice when it comes to Content Management ...