css - Position child divs fit within a parent in vertical order -

I am trying to fit the child divs within the parent vertical order. If it goes out of the parent area, then it should start in a new column on the right.

There is also a banner top that takes the entire length of the parent.

  body {background color: # 000; } #mainArea {status: relative; Margin: 0 auto; Width: 400px; Height: 400 pixels; Background color: # 777; } #mainBanner {Location: Relative; Width: 400px; Height: 50px; Background color: #fff; Float: bottom; } Div [id = "box_"] {status: relative; Width: 105px; Height: 40px; Background color: # 333; Float: bottom; Margin: 3px 3px 3px 3px; }  

  & lt; Div id = "mainArea" & gt; & Lt; Div id = "mainBanner" & gt; & Lt; / Div & gt; & Lt; Div id = "box_1" & gt; & Lt; / Div & gt; & Lt; Div id = "box_2" & gt; & Lt; / Div & gt; & Lt; Div id = "box_3" & gt; & Lt; / Div & gt; & Lt; Div id = "box_4" & gt; & Lt; / Div & gt; & Lt; Div id = "box_5" & gt; & Lt; / Div & gt; & Lt; Div id = "box_6" & gt; & Lt; / Div & gt; & Lt; Div id = "box_7" & gt; & Lt; / Div & gt; & Lt; Div id = "box_8" & gt; & Lt; / Div & gt; & Lt; Div id = "box_9" & gt; & Lt; / Div & gt;  
 
  
 
 
 
 
 
 
 
 
 
 
 Can start a new column?   
 
 
 You create a two column layout,  # col_1  and  # Added col_2 . 
 
   
 
 
 
 
  body {background color: # 000; } #mainArea {margin: 0 auto; Width: 400px; Height: 400 pixels; Background color: # 777; } #mainBanner {width: 400px; Height: 50px; Background color: #fff; } # Coli_1, # colos_2 {width: 100px; Swim left; Padding: 3px 0 3px 3px; } Div [id = "box_"] {width: 100px; Height: 40px; Margin: 0x3px; Background color: # 333; }  
 
  & lt; Div id = "mainArea" & gt; & Lt; Div id = "mainBanner" & gt; & Lt; / Div & gt; & Lt; Div id = "col_1" & gt; & Lt; Div id = "box_1" & gt; 1 & lt; / Div & gt; & Lt; Div id = "box_2" & gt; 2 & lt; / Div & gt; & Lt; Div id = "box_3" & gt; 3 & lt; / Div & gt; & Lt; Div id = "box_4" & gt; 4 & lt; / Div & gt; & Lt; Div id = "box_5" & gt; 5 & ​​lt; / Div & gt; & Lt; Div id = "box_6" & gt; 6 & lt; / Div & gt; & Lt; Div id = "box_7" & gt; 7 & lt; / Div & gt; & Lt; Div id = "box_8" & gt; 8 & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "col_2" & gt; & Lt; Div id = "box_9" & gt; 9 & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  
 
 
 
 
 You can also use Flexbox, added a container  #mainContent . 
 
   
 
 
 
 
  body {background-color: # 000; } #mainArea {margin: 0 auto; Width: 400px; Height: 400 pixels; Background color: # 777; } #mainBanner {width: 400px; Height: 50px; Background color: #fff; } #mainContent {display: flex; Flex-wrap: rap; Flex-direction: column; Alignment-content: Flex-start; Height: 350px; Padding: 3px; } Div [id = "box_"] {width: 105px; Height: 40px; Margin: 0 3px 3px 0; Background color: # 333; }  
 
  & lt; Div id = "mainArea" & gt; & Lt; Div id = "mainBanner" & gt; & Lt; / Div & gt; & Lt; Div id = "main content" & gt; & Lt; Div id = "box_1" & gt; 1 & lt; / Div & gt; & Lt; Div id = "box_2" & gt; 2 & lt; / Div & gt; & Lt; Div id = "box_3" & gt; 3 & lt; / Div & gt; & Lt; Div id = "box_4" & gt; 4 & lt; / Div & gt; & Lt; Div id = "box_5" & gt; 5 & ​​lt; / Div & gt; & Lt; Div id = "box_6" & gt; 6 & lt; / Div & gt; & Lt; Div id = "box_7" & gt; 7 & lt; / Div & gt; & Lt; Div id = "box_8" & gt; 8 & lt; / Div & gt; & Lt; Div id = "box_9" & gt; 9 & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;