css - when i resize the html page, the elements are getting displaced -

When I change the size of the page, div elements are going wrong. Also if I change the resolution, then it gets misplaced again

CSS:

  html {height: 100%; Width: 100%; Body {boundary: 1 px solid black; Height: 100%; Width: 80%; Text align: center; Margin-left: 50px; } Svg {font: 10px sans-serif; }. Reset path {fill: # 666; Fill-Opacity: .8; Stroke: # 000; Stroke-width: 2.5 px; } .extent {fill-opacity: .45; Shape Rendering: Crisp Edges; Stroke-width: 10 stroke: #fff; Stroke-height: 10; }. Leftcontainer {float: left; Margin-left: 0 pixels; Width: 35%; Height: 21%; Margin-top: 10px; } .centercontainer {float: center; Margin-left: -40px; Width: 30%; Height: 40%; } .graphcontainer {float: left; Margin-left: -310px; Width: 25%; Height: 10%; Margin-top: 120px; } .clegendcontainer {float: left; Width: 25%; Height: 10%; // border: 1 px solid black; Margin-left: -160px; Margin-top: 161 pixels; }. Ballgendcontainer {float: left; Width: 25%; Height: 10%; // border: 1px solid red; Margin-left: -318 pixels; Margins Top: 201px; } Olegend container {float: left; Width: 25%; Height: 10%; // border: 1 px solid yellow; Margin-left: -318 pixels; Margin-top: 241 pixels; } .leggendcontenter {float: left; Width: 25%; Height: 10%; // border: 1px solid brown; Margin-left: -318 pixels; Margin-top: 281px; }. Axis Path, .xx {fill: none; Stroke: # 000; Stroke-width: 1.85px; Shape Rendering: Crisp Edges; }  

HTML:

  & lt; H1 & gt; Tenderbox chart mockup DV & lt; / H1> & Lt; H4 & gt; During the date range, select the date range by dragging the mouse & lt; / H4 & gt; & Lt; Div class = "leftcontainer" id = "timer" style = "border: 1px solid #ccc" & gt; & Lt; / Div & gt; & Lt; Div class = "graphcontainer" id = "graph" style = "border: 1px solid #ccc" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "clustered container" id = "checksenden" style = "border: 1px solid # ccc" & gt; & Lt; / Div & gt; & Lt; Div class = "blegendcontainer" id = "buildslegend" style = "border: 1px solid #ccc" & gt; & Lt; / Div & gt; & Lt; Div class = "olegendcontainer" id = "osslegend" style = "border: 1px solid #ccc" & gt; & Lt; / Div & gt; & Lt; Div class = "alegendcontainer" id = "appseclgend" style = "border: 1px solid #ccc" & gt; & Lt; / Div & gt;  

thanks :)

Do not use margin-left In negative.

  .centercontainer {float: center; Margin-left: -40px; Width: 30%; Height: 40%; } .graphcontainer {float: left; Margin-left: -310px; Width: 25%; Height: 10%; Margin-top: 120px; } .clegendcontainer {float: left; Width: 25%; Height: 10%; // border: 1 px solid black; Margin-left: -160px; Margin-top: 161 pixels; }. Ballgendcontainer {float: left; Width: 25%; Height: 10%; // border: 1px solid red; Margin-left: -318 pixels; Margins Top: 201px; } Olegend container {float: left; Width: 25%; Height: 10%; // border: 1 px solid yellow; Margin-left: -318 pixels; Margin-top: 241 pixels; } .leggendcontenter {float: left; Width: 25%; Height: 10%; // border: 1px solid brown; Margin-left: -318 pixels; Margin-top: 281px; }