Question

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 problem?

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.

Answer 1

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