3 DIVs, middle responsive width

HTML

<div id="main">
    <div id="left">Left</div>
    <div id="right">Middle</div>
</div>  
<div id="prec"></div>

CSS

html, body{
        margin:0;
        padding:0;
    }
#perc {width:50%;
height:20px; background-color:pink; display:block; float:left; clear: both;}
    #main {
        width:50%;
    padding-left:30px
    }
    #main:after {
        clear: both;
        display: table;
    }
    #left {
        float: left;
        margin-left: -30px;
        width: 30px;
        background: red;
    }
    #right {
        background: blue;
    }