Float top gallery without using position - html

Question

My current, actual result:
I want to move the blue <div> to the top without using position, and remove the space between. Is this possible?
The desired result:
This is what I've tried:
#headerwrapper {
width: 988px;
height: 500px;
margin: 0 auto;
background: #000;
padding: 10px 20px;
}
#header1 {
width: 300px;
height: 250px;
float: left;
margin-right: 25px;
background: red;
}
#header2 {
width: 300px;
height: 450px;
float: left;
margin-right: 25px;
background: red;
}
#header3 {
width: 300px;
height: 350px;
float: left;
margin-right: 25px;
background: red;
}
#header4 {
width: 300px;
height: 350px;
float: left;
clear: left;
margin-right: 25px;
background: blue;
}
<div id='headerwrapper'>
<div id='header1'></div>
<div id='header2'></div>
<div id='header3'></div>
<div id='header4'></div>
<div id='header5'></div>
<div id='header6'></div>
</div>
Note that the number of items per line may change (i.e., I don't know where the new line will start).

Answer 1

Looks like you just need a negative top margin. It also may help you to turn the wrapper into a block element and its children into inline-block elements. That way they line up better.
Good luck!
#headerwrapper {
width: 988px;
height: 500px;
margin: 0 auto;
background: #000;
padding: 10px 20px;
display: block;
}
#header1 {
width: 300px;
height: 250px;
float: left;
margin-right: 25px;
background: red;
display: inline-block;
}
#header2 {
width: 300px;
height: 450px;
float: left;
margin-right: 25px;
background: red;
display: inline-block;
}
#header3 {
width: 300px;
height: 350px;
float: left;
margin-right: 25px;
background: red;
display: inline-block;
}
#header4 {
width: 301px;
height: 350px;
float: left;
clear: left;
margin-top: -175px;
margin-left: -1px;
background: blue;
display: inline-block;
}
<div id='headerwrapper'>
<div id='header1'></div>
<div id='header2'></div>
<div id='header3'></div>
<div id='header4'></div>
<div id='header5'></div>
<div id='header6'></div>
</div>

Answer 2

You can set a negative top margin to the #header4. This will move the div up.
The final #header4 style would look like this:
#header4 {
width: 301px;
height: 350px;
float: left;
clear: left;
margin-top: -200px;
}
The -200px can be changed to any number you need.

Answer 3

You could use a Masonry-esque solution. Here is a fiddle of the example. If you need more columns, change the column-count, column-width, and column-gap.
#headerwrapper {
width: 100%;
max-width: 988px;
margin: 2em auto;
background: #000;
padding:10px 20px;
}
.cols {
-moz-column-count: 3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count: 3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
}
.box {
margin-bottom: 20px;
}
.box.one {
height: 200px;
background-color: #d77575;
}
.box.two {
height: 300px;
background-color: #dcbc4c;
}
.box.three {
background-color: #a3ca3b;
height: 400px;
}
.box.four {
background-color: #3daee3;
height: 500px;
}
.box.five {
background-color: #bb8ed8;
height: 600px;
}
<div id="headerwrapper" class="cols">
<div id="header1" class="box one"></div>
<div id="header2" class="box two"></div>
<div id="header3" class="box one"></div>
<div id="header4" class="box three"></div>
<div id="header5" class="box four"></div>
<div id="header6" class="box five"></div>
<div id="header7" class="box one"></div>
</div>

Answer 4

you could consider column :
boxes may breaks into different columns
#headerwrapper {
width: 988px;
margin: 0 auto;
background: #000;
padding: 10px 20px;
-moz-column-count:3;
column-count:3;
}
#header1 {
width: 300px;
height: 250px;
margin-right: 25px;
background: red;
}
#header2 {
width: 300px;
height: 450px;
margin-right: 25px;
background: red;
}
#header3 {
width: 300px;
height: 350px;
margin-right: 25px;
background: red;
}
#header4 {
width: 300px;
height: 350px;
margin-right: 25px;
background: blue;
}
#headerwrapper>div {
margin:15px 25px;
/* display:inline-block; */
}
#headerwrapper>div:first-child {
margin-top:0;
}
<!-- begin top header with images -->
<div id='headerwrapper'>
<div id='header1'></div>
<div id='header2'></div>
<div id='header3'></div>
<div id='header4'></div>
<div id='header5'></div>
<div id='header6'></div>
</div>
or not break
#headerwrapper {
width: 988px;
margin: 0 auto;
background: #000;
padding: 10px 20px;
-moz-column-count:3;
column-count:3;
}
#header1 {
width: 300px;
height: 250px;
margin-right: 25px;
background: red;
}
#header2 {
width: 300px;
height: 450px;
margin-right: 25px;
background: red;
}
#header3 {
width: 300px;
height: 350px;
margin-right: 25px;
background: red;
}
#header4 {
width: 300px;
height: 350px;
margin-right: 25px;
background: blue;
}
#headerwrapper>div {
margin:15px 25px;
display:inline-block; /* help to keep all box within a single col .... css rules avoiding breaking seems not yet implemented */
}
#headerwrapper>div:first-child {
margin-top:0;
}
<!-- begin top header with images -->
<div id='headerwrapper'>
<div id='header1'></div>
<div id='header2'></div>
<div id='header3'></div>
<div id='header4'></div>
<div id='header5'></div>
<div id='header6'></div>
</div>