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

On 07.31.11, In CSS, How to

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:

1

#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.



Steve

Steve is the Founder and Editor-in-chief of Web Developer Juice. He's web developer with 4 years of experience in CSS, HTML, PHP and javascript. If you’d like to connect with him, point to the contact page and follow him on Twitter: @wdjuice.

Visit Website

Comments

Shannon
07.31.11

Have you tried this technique http://www.positioniseverything.net/articles/onetruelayout/equalheight saves the problem of having images, plus you can then have variable width

Irina
07.31.11

Nice and simple! I’ve used a jquery script to create equal height columns – works with mixed success; besides, you never know if javascript is disabled in a user’s browser. Never thought of the simple way – thanks for sharing.

You could give the left column a border-right and the right column a border-left. Then give the right column a negative margin-left of -1px (or vice versa). The borders now overlap. Whichever is the tallest column, the border always stretches the full height.

vsync
07.31.11

I’m sorry but this is a SHIT solution.
this is a problem back from the early days of the CSS and
I have no idea you are you referring to it now.
it’s super easy to solve it with minimum CSS.
give the right column: padding-bottom:1000px; margin-bottom:-1000px;
and the parent of that column: overflow:hidden;