Div clearfix remove white space

Question

My website has a header and a menubar. I'd like to position them horizontally sticked to each other like this:

---

        HEADER

---

         MENU

---

But what happens is:

---

        HEADER

---

        WHITE SPACE

---

         MENU

---

The code for my header:

<div id="headersecure" class="clearfix">
   <div class="headeritem"><a href="#">Uitloggen</a></div>
   <div class="headeritem"><a href="#" onclick="loadX()">X</a></div>
   <div class="headeritem headerfoto"><a href="#" onclick="loadX(()">Test</a></div>
   <div class="headeritem"><a href="#" onclick="loadQ()">W</a></div>
   <div class="headeritem"><a href="#" onclick="loadQC()">Contact</a></div>
</div>

The header css code:

#headersecure {
    padding-left: 10%;
    width: 90%;
    min-width: 1024px;
    height: 40px;
    z-index: 1;
    font-family: LANENAR;
}

.headeritem {
    height: 100%;
    padding-right: 30px;
    float: right;
    padding-top: 10px;
    color: #FFF;
}

The code for my menubar:

<div id="headermenu" class="clearfix">
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadA()"><img src="images/a.png">A</a></div>
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadB()"><img src="images/b.png">B</a></div>
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadC()"><img src="images/c.png">C</a></div>
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadD()"><img src="images/d.png">D</a></div>
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadE()"><img src="images/e.png">E</a></div>
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadF()"><img src="images/f.png">F</a></div>
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadG()"><img src="images/g.png">Test12313131311</a></div>
 </div>

The css code for the menu:

#headermenu {
    padding-left: 10%;
    width: 90%;
    min-width: 1024px;
    top: 40px;
    height: 25px;
    font-family: LANENAR;
}

.menuitem {
    height: 25px;
    width: 8%;
    float: left;
    color: #FFF;
}

The clearfix css code:

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

Because both of them use float, whenever the menubaritems are on the same horizontal level as the headeritems, they start to position the wrong way.

Instead of using class: clearfix, I also tried putting a div between them, like this:

<div style="clear:both;"> </div>

My problem is, that both solutions create an empty space between the menu and the header. I also tried setting all margins, padding etc to 0, but that doesn't help.

// edit: fiddle with div style clear both: http://jsfiddle.net/XJ3QE/3/ screenshot:

// edit: screenshot in Chrome 28

Answer 1

If your problem is just the free space between header and menu, it is because of height of h.headeritem. it removed like This Link.

By deleting height: 100%; , the .headeritem is like this :

.headeritem {
    height: 100%;
    padding-right: 30px;
    float: right;
    padding-top: 10px;
    color: #FFF;
}

Edit Part : As is clear from the screenshot, Test12313131311 is below of headermenu, it's because of width of menuitem. You can change it to 13% or a pixel size :

.menuitem {
    height: 25px;
    width: 13%; /* or width: 140px */
    float: left;
    color: #FFF;
}