OK, this is the 3rd time I’ve written this, and it’s now being written inside of textedit, b/c the tumblr plugin for chrome loses your data if you click off the browser window, or you click the “html” link… angry face

So, the shortened scenario now…

The situation is that you have two floated block level containers that you wish to have a separator line between.  This is a very common situation.  Now, many times you don’t know the height of these containers b/c the content within them is dynamic.  This is an issue b/c you almost always want the line to be the height of the greatest container.

Now, you could use js to do this, getting the height of both containers and overriding the height style inline in the DOM, but this is a nasty approach and js should be avoided at all costs.

I am sure there are some other css solutions out there that others have used, and I’d love to hear them as well.  However, I recently encountered this issue and came up with what I think is a pretty brilliant and clean solution.

I should reiterate that this really only works with 2 columns b/c we’re only able to get the greater of the two.  Again, this is for floated block level containers.

So, the HTML code


<div class="container column-one">
    Column One<br />
    Column One<br />
    Column One<br />
    Column One<br />
    Column One<br />
    Column One
</div>
<div class="container column-two">
    Column Two<br />
    Column Two
</div>

Now, obviously from this code we can tell which container has a greater height, but let’s assume for the sake of this example that we don’t know which one would have a larger height. So, here is the CSS…


div.container {
    float: left;
    padding: 10px;
    }

div.column-one {
    border-right: 1px solid #CCC;
    }

div.column-two {
    margin-left: -1px;
    border-left: 1px solid #CCC;
    }

And that’s it, basically, we just overlay the lines on the same side.  Super simple, huh?  Would love to hear any feedback that you might have.