Float top gallery without using position

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>