Question

The current html of the website I work for is a mess, some because of the project itself (the pages are different from each other but have the same idea,like a newspaper) and some because the html team sux, lol.

The idea is that I can have a row, or two columns without a border between then, two columns with a border, or a combination of these.

I wrote the following css and html, it looks now organized, and you can use any of the combinations:

CSS:

/* start structure */

div#wrapper {
    margin: 0 auto;
    width: 1024px;
}

.group:after{
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

body {
    font-family: "Trebuchet MS";
}

div#content {
    border: 1px solid #b2b2b2;
}

div.row {
    margin: 10px;
}

div.row.bb {
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #b2b2b2;
}

div.row.bt {
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid #b2b2b2;
}

div.column {
    margin: 10px;
    float: left;
}

div.column.left {
    width: 660px;
}

div.column.right {
    width: 322px;
}

div.column.left.br {
    width: 659px;
    margin-right: 0;
    padding-right: 10px;
    border-right: 1px solid #b2b2b2;
}

/* end structure */

HTML:

<div id="wrapper">
    <div id="content">
        <div class="row">a</div>
            <div class="row bt bb">b</div>
            <div class="columns group">
            <div class="column left br"><p>c</p><p>c</p><p>c</p><p>c</p></div>
            <div class="column right">d</div>
        </div>
        <div class="row bt bb">a</div>
        <div class="columns group">
            <div class="column left"><p>c</p><p>c</p><p>c</p><p>c</p></div>
            <div class="column right">d</div>
        </div>
        <div class="row bt">a</div>
    </div>
</div>

But I found a problem. When using two columns with border div.column.left.br, if the right column is taller than the left column, the border ends where the left column ends. I know I can solve it by putting the border both on the left and right columns, but I’m ending with a 2 pixel border.

How can I solve it in my context?

Answer 1

Add both a border-left on the right column and a border-right on the left column. Then move the right column to the left 1px.

jsFiddle Example

New CSS

<style type="text/css">
/* start structure */

div#wrapper {
    margin: 0 auto;
    width: 1024px;
}

.group:after{
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

body {
    font-family: "Trebuchet MS";
}

div#content {
    border: 1px solid #b2b2b2;
}

div.row {
    margin: 10px;
}

div.row.bb {
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #b2b2b2;
}

div.row.bt {
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid #b2b2b2;
}

div.column {
    margin:10px 0;
    padding: 0 10px;
    float: left;
}

div.column.left {
    width: 660px;
}

div.column.right {
    width: 322px;
}
div.column.left.br + div.column.right {
    border-left: 1px solid #b2b2b2;
    margin-left:-1px;
}

div.column.left.br {
    width: 659px;
    margin-right: 0;
    padding-right: 10px;
    border-right: 1px solid #b2b2b2;
}

/* end structure */
</style>