html - HTML5 CSS液体布局问题

我正在尝试设计一个看起来像这样的布局：

我希望使用百分比而不是px设计整个布局。我想我已经很接近了，但是我在边距或其他方面有问题。这是我当前的代码：

的CSS

html, body {
    width: 95%;
    margin: 0 auto;
    height: 100%;
}

#header  {
      margin: 0;
      background-color: #000000;
      height: 5%;
      width: 100%;
}
#wrapper {
    height: 95%;
    margin: 0;
}

#content {
    width: 100%;
    overflow: hidden;
    height: 95%;
    margin: 0;
}

#left {
    margin: 0;
    width: 25%;
    height: 500px;
    float: left;
}

#right {
    float: left;
    width: 75%;
    height: 100%;
    margin-right: 0%;
    display: inline;
}

.boxes {
    margin: .5%;
    width: 48%;
    height: 48%;
}

#topleft {
    float: left;
}

#topright {
    float: left;
    display: inline;
}

#bottomleft {
    float: left;
}

#bottomright {
    float: left;
    display: inline;
}

的HTML

<html>
    <body>
        <div id="header">

    </div>
    <div id="wrapper">
        <div id="content">
                <div id="left">
                </div>
                <div id="right">
                    <div class="boxes" id="topleft"></div>
                    <div class="boxes" id="topright"></div>

                    <div class="boxes" id="bottomleft"></div>
                    <div class="boxes" id="bottomright"></div>
                </div>
        </div>
    </div>
    </body>
</html>

我还需要添加什么其他CSS和/或HTML代码才能获得所需的布局？任何帮助将不胜感激。

最佳答案

我想现在是正确的，看一下。我回来的时候正确的宽度是75％，74％是错误的。但是我使用css3的box-sizing: border-box来使宽度包括#left和.box的边界。另外，我将盒子的宽度设置为49％，这完成了所需的大小以及0.5％的边距：

的CSS

    html, body {
    width: 95%;
    margin: 0 auto;
    height: 100%;
    border: 1px solid;
}

#header  {
      margin: 0;
      #background-color: #000000;
      height: 5%;
      width: 100%;
      border: 1px solid;

}
#wrapper {
    height: 95%;
    margin: 0;
}

#content {
    width: 100%;
    #overflow: hidden;
    height: 95%;
    margin: 0;
    padding: 0px;
}

#left {
    box-sizing: border-box;
    margin: 0;
    width: 25%;
    height: 500px;
    float: left;
    border: 1px solid;
    padding: 0px;
}

#right {

    float: left;
    width: 75%;
    height: 100%;
    margin-right: 0px;
    display: inline;
    padding: 0px;
}

.boxes {
    box-sizing: border-box;
    margin: .5%;
    width: 49%;
    height: 49%;
    border:1px solid;
}

#topleft {

    float: left;
}

#topright {
    float: left;
    display: inline;
}

#bottomleft {
    float: left;
}

#bottomright {
    float: left;
    display: inline;
}