关于CSS+DIV浮动的一个效果问题

我想让一行显示两个div块，等高，但是第一个是定宽的，第二个是自动占据这一行剩下的宽度

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body,div{
                margin: 0;
                padding: 0;
            }
            .m-content:after{
                display:block;
                visibility:hidden;
                clear:both;
                height:0;
                overflow:hidden;
                content:'.';
            }
            .m-content{
                width:100%;
                height:24px;
                line-height:24px;
                zoom:1;
            }
            .m-content .g-left{
                float:left;
                width:100px;
                background-color:#399521;
            }
            .m-content .g-right{
                width:100%;
                background-color:#39A4DC;
            }
        </style>
    </head>
    <body>
        <div class="m-content">
            <div class="g-left">left</div>
            <div class="g-right">right</div>
        </div>
    </body>
</html>

编写代码时将第二个块的内容放到第一个块的前面，并将第二个块浮动到右侧，设置好第二个块和第二个块的高度相同，第二个就自动占据剩下的宽度。

 <html>
    <head>
        <title>aaa</title>
        <style>
            body{
                padding:0;
                margin:0;
            }
            #left{
                height:100px;
                width:100px;
                background:black;
                float:left;
            }
            #right{
                height:100px;
                width:100%;
                background:blue;
            }
        </style>
    </head>
    <body>          
            <div id="left" ></div>
            <div id="right"></div>
    </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

Document

div1

div2

body{padding:0px;margin:0px;}.div1{width:100px;height:100px;background-color:black;float:left;}.div2{height:100px;width:100%;background-color:blue;}