html - HTML5 CSS Liquid Layout Issue -

I am trying to design a layout that looks something like this:

I should use the whole layout instead of percentage of PX. I think I am quite close, but I am having problems with margin or something here is my current code:

css

  html, body {width : 95%; Margin: 0 auto; Height: 100%; } #header {margin: 0; Background color: # 000000; Height: 5%; Width: 100%; } #wapper {height: 95%; Margin: 0; } # Content {width: 100%; Hidden flurry; Height: 95%; Margin: 0; } # Left {margin: 0; Width: 25%; Height: 500px; Swim left; } #right {float: left; Width: 75%; Height: 100%; Margin-right: 0%; Display: Inline; }. Box {margin: .5%; Width: 48%; Height: 48%; } #topleft {float: left; } #full {float: left; Display: Inline; } #Botmand {float: left; } #BotMoit {float: left; Display: Inline; }  

HTML

  & lt; Html & gt; & Lt; Body & gt; & Lt; Div id = "header" & gt; & Lt; / Div & gt; & Lt; Div id = "wrapper" & gt; & Lt; Div id = "content" & gt; & Lt; Div id = "left" & gt; & Lt; / Div & gt; & Lt; Div id = "right" & gt; & Lt; Div class = "box" id = "full" & gt; & Lt; / Div & gt; & Lt; Div class = "boxes" id = "top" & gt; & Lt; / Div & gt; & Lt; Div class = "boxes" id = "downwards" & gt; & Lt; / Div & gt; & Lt; Div square = "box" id = "sword" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

Why do I need to add my CSS and HTML code to get the layout? Any help would be greatly appreciated.

I think it's right, take a look. I came back with 75% correct width, 74% was wrong but I wanted to include the boundaries of #left and .box in width For CSS 3 use the box-size: border-box . In addition, I have set the box width to 49% , which satisfies the .5% margin as well as the required size :

CSS

  html, body {width: 95%; Margin: 0 auto; Height: 100%; Border: 1 px solid; } #header {margin: 0; # Background-color: # 000000; Height: 5%; Width: 100%; Border: 1 px solid; } #wapper {height: 95%; Margin: 0; } # Content {width: 100%; # Hidden flurry; Height: 95%; Margin: 0; Padding: 0 pixels; } # Left {box-size: border-box; Margin: 0; Width: 25%; Height: 500px; Swim left; Border: 1 px solid; Padding: 0 pixels; } #right {float: left; Width: 75%; Height: 100%; Margin-right: 0 pixels; Display: Inline; Padding: 0 pixels; }. Box {box-size: border-box; Margin: .5%; Width: 49%; Height: 49%; Border: 1 px solid; } #topleft {float: left; } #full {float: left; Display: Inline; } #Botmand {float: left; } #BotMoit {float: left; Display: Inline; }