Question

I’m using relative widths:

<style>
    #ldiv {
        height: 400px;
        width: 75%;
        background-color:#fff;
        color:#ccc;
        border: 1px solid #F2F2F2;
        float: left;
    }

    #rdiv {
        vertical-align: top;
        float: left;
        width: 25%;
    }
</style>

<div>
    <div id="ldiv">Left</div>
    <div id="rdiv">Right</div>
</div>

With this code, #rdiv doesn’t stay beside #ldiv.
If I use margin-right: -2px; in #ldiv, the two divs stay side by side, but overlap slightly.

I know the problem is caused by the border, but how can I make it fit?

Answer 1

write like this:

#ldiv {
    height: 400px;
    background-color:#fff;
    color:#ccc;
    border: 1px solid #F2F2F2;
    overflow:hidden;
}

#rdiv {
    vertical-align: top;
    float: right;
    width: 25%;
}

HTML

<div>
    <div id="rdiv">Right</div>
    <div id="ldiv">Left</div>  
</div>

Check this http://jsfiddle.net/aYteE/

OR

You can use box-sizing property for this.

Check this http://jsfiddle.net/aYteE/2/