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: enter image description here

// edit: screenshot in Chrome 28

Here's a jsFiddle with your code: http://jsfiddle.net/XJ3QE/ No whitespace there. Perhaps something else is interfering with your CSS? — Artless, Aug 07 '13 at 10:15
That was because the menuitems didn't have the same horizontal position as the headeritems. I edited the above code, instead of using menuitem G, I made it Test12313131311, just as an example. Now you see what goes wrong. — Nick, Aug 07 '13 at 10:18
Still no white space. How about you supply a jsFiddle that shows the problem rather than me trying to reproduce your error? — Artless, Aug 07 '13 at 10:19
Sorry...here you go: http://jsfiddle.net/XJ3QE/2/ It goes well in Firefox 11, but the problem occurs in Chrome — Nick, Aug 07 '13 at 10:29
No white space in Chrome 28, Firefox 22 or IE 10. By the way, your `img` tags are not closed. Can you post a screenshot maybe? — Artless, Aug 07 '13 at 10:36
Screenshots added. Ps, thanks for the img closing tip. Will do that when I get the chance. — Nick, Aug 07 '13 at 10:57

Mahmood Kohansal · Accepted Answer · 2013-08-07T13:50:56.550

0

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;
}

edited Aug 07 '13 at 13:50

answered Aug 07 '13 at 11:13

Mahmood Kohansal

1,021
2
16
42

Well, there are 2 problems. 1) The white space if I use div style: clear. 2) The fact that the menuitem with the same horizontal position as the headeritem is positioned below the menubar. Problem 1 is solved with the height solution, problem 2 isn't... – Nick Aug 07 '13 at 11:55
you mean `Test12313131311` that is below other items in `headermenu` ?! – Mahmood Kohansal Aug 07 '13 at 13:38
Yes. Like in the screenshot, you see c, d, e, f etc in the menubar all at the same height. Except for Test12313131311, that is not in the menubar, because of the headeritems above it. Hope that's fixable. – Nick Aug 07 '13 at 15:24
1

Indeed, the 1 image in the headermenu caused the white space between them. Thanks! – Nick Aug 07 '13 at 15:34

Div clearfix remove white space

1 Answers1