Two columns with separator border

I would like to have two columns with separator border.

The task is quite simple when the columns have the same height.

But, if the heights of columns are different, and you don't know a priori which is the higher column, (and I don't want to use fixed value) how can I solve the proble开发者_JS百科m?

The background color is the same.

A pure css solution is the best. If not possible, also a JavaScript code is acceptable.

Click here for the current example.

You can set the display of the container to table and the left and right columns to table-cell

#container {
 display: table;
  width: 100%;  
}
#content-left {
    border-right: 4px dotted #000;
    width: 50%;
    display: table-cell;
    margin-right: -4px;
}
#content-right {
    width: 50%;
    display: table-cell;
}

Then you just need to wrap the left and right columns in the container and you have it.

<div id="wrapper">
    <div id="container">
        <div id="content-left">left</div>
        <div id="content-right">right<br />right<br />right</div>   
    </div>
    <div id="footer">
        footer content
    </div>
</div>

Look Here

One css method is to use a repeating background image for the dotted line - this repeat goes on a div surrounding the 2 columns, like so:

http://jsfiddle.net/P5Z9s/ (obviously you'd get a better image, I just pulled this from google)

Or using jQuery, you can do something like:

http://jsfiddle.net/ntWRY/ (you basically add the same class to the columns you want to equalize, and then call the function on that class)

I suggest you read about faux columns.

If you can't afford the time (not that much, but...), then using JS you could simply check which is higher and set the other's min-height to that.
I think this would work as you want it. But I suggest you learn about the faux columns instead.

Perhaps something like this is what you are looking for:

http://jsfiddle.net/euYTQ/40/

HTML:

<div class="container">
    <div class="left">section left</div>
    <div class="right">section right<br>other row</div>
    <div class="footer">section footer</div>
</div>

CSS:

div.container {
    position:absolute;
    background:#eee;
    margin: 0 auto;
    width: 750px;
    height:100%;
}
.left{
    position:absolute;
    left:0px;
    top:0px;
    bottom:50px;
    width:48%;
    border-right-style:dotted;
}
.right {
    position:absolute;
    right:0px;
    top:0px;
    bottom:50px;
    width:48%;
    border-right-style:dotted;
}
.footer {
    position:absolute;
    background: none repeat scroll 0 0;
    bottom: 0px;
    height:50px;
    left:0px;
    right:0px;
    border-top-style:dotted;
}