Question

I want to create a robust css style that works whith almost all browser (included IE7, firefox 3)
that show me two columns and one footer divided by dotted border.
I was trying to implement the following code,
but I have one problem:
when I apply border-right-style:dotted; to left class
A and B are not at the same horizontal level.
please halp me to fix the css style.

Click here for the current example.

HTML

<div class="container">
  <div clas="left">A</div>
  <div class="right">B</div>
  <div class="footer">C</div>
</div>

CSS

div.container {
    background:#eee;
    margin: 0 auto;
    width: 750px;
} 
.left{
    background:#ddd;
    float: left;
    width: 50%;
    border-right-style:dotted;
}
.right {
    background:#eee;
    float: right;
    width: 50%;
}
.footer {
    background: none repeat scroll 0 0 #eef;
    clear: both;
    border-top-style:dotted;
}

Answer 1

The problem that you’re experiencing is that the border of the element is not contained within the defined width of that element; so the element is 50% of its parents width, but with an additional width added by the border.

If you reduce the width of the elements to, for example, 48%, then it seems to work as you’d like:

div.container {
    background:#eee;
    margin: 0 auto;
    width: 750px;
} 
.left{
    background:#ddd;
    float: left;
    width: 48%;
    border-right-style:dotted;
}
.right {
    background:#eee;
    float: right;
    width: 48%;
}

JS Fiddle demo.

---

Edited with update,

You could, for Firefox and Chromium (FF5.x and Chromium 12.x on Ubuntu 11.04) use:

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box; /* Left this in, but it doesn't seem to work... */
}

JS Fiddle demo.

Which incorporates the border width into the width of the element; with this approach you could retain the width: 50%; on the elements and borders would sort themselves out. Unfortunately it doesn’t work on Opera or, presumably, IE.