如何定位div向左浮动但也向上浮动

Question

How to make Divs inside div float left with no spaces; As you can see on the image have spaces, i am using these codes;

main {position:relative;left:339.5px;top:40px;width:1018px;height:1000px;-webkit-box-shadow:inset 0px 0px 40px;}

main div {float:left;margin:1px;-webkit-box-shadow:inset 0px 0px 20px;}
#div_size1 {width:336px;height:200px;}
#div_size2 {width:336px;height:300px;}
#div_size3 {width:336px;height:100px;}


<main>
<div id="div_size1">
</div>
<div id="div_size2">
</div>
<div id="div_size3">
</div>
<div id="div_size3">
</div>
<div id="div_size3">
</div>
<div id="div_size2">
</div>
<div id="div_size2">
</div>
<div id="div_size1">
</div>
<div id="div_size2">
</div>
<div id="div_size3">
</div>
<div id="div_size3">
</div>
</main>

Answer 1

If you post the HTML as well I can help more. But it looks like you don't have any floats on the divs you want to float.

#div_size1 {float:left;width:336px;height:200px;}
#div_size2 {float:left;width:336px;height:300px;}
#div_size3 {float:left;width:336px;height:100px;}

Answer 2

If you change the position to absolute you can change its distance from the top and sides:

main div {
  margin:1px;
  -webkit-box-shadow:inset 0px 0px 20px;

  position:absolute;
  left: 0px;
  top: 0px;
}

Hope this helps

Answer 3

If you want it fixed and if I was building this layout I would have 2 "colum" Divs. The first 1 would be 2 boxes wide. And the other one would be 1 box wide. Left and Right. The 5 boxes on the right would be in the right column div. Then with the left column I would further separate that. I would put 2 "row" divs. The bottom would would have the bottom 1 box (div_size3). Then with the top row I would separate that by inserting 2 colum divs. The left one would have 3 boxes and the right one 2 boxes.