css - Div clearfix remove white space -

my website has header , menubar. i'd position them horizontally sticked each other this:

---

        header 

---

         menu 

---

but happens is:

---

        header 

---

        white space 

---

         menu 

---

the code 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 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 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 menubaritems on same horizontal level headeritems, start position wrong way.

instead of using class: clearfix, tried putting div between them, this:

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

my problem is, both solutions create empty space between menu , header. tried setting margins, padding etc 0, doesn't help.

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

// edit: screenshot in chrome 28

if problem free space between header , menu, because of height of h.headeritem. removed this link.

by deleting height: 100%; , .headeritem :

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

edit part : clear screenshot, test12313131311 below of headermenu, it's because of width of menuitem. can change 13% or pixel size :

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