Take the 2-minute tour ×



body {
    background-color: #666666;
    font-family:Verdana, Geneva, Tahoma, sans-serif;

div.header {
    background-color: #333333;  

div.navigationBar {

div.navigationButton {

.navigationBar ul {

.navigationBar li {

.navigationButton a

.navigationButton a:link {

.navigationButton a:hover {


<!DOCTYPE html>
  <meta charset="utf-8">
  <meta content="pl" http-equiv="Content-Language">
  <div class="header" style="height:200px; width: 800px;"></div>
  <div class="navigationBar" style= "height:73px; width: 800px;" > /* added unit to the height property */
      <li><div class="navigationButton" ><a href="#link1">Button1</a></div></li>
      <li><div class="navigationButton" ><a href="#link2">Button2</a></div></li>
      <li><div class="navigationButton" ><a href="#link3">Button3</a></div></li>

Why there is a gap between header div and the navigationBar? Well-welcomed other comments and advices toward my code.

The wretched gap occurs in web browsers image(why not in jsFiddle?), I tried this code in Firefox and IE.

share|improve this question

3 Answers 3

up vote 3 down vote accepted

You have multiple mistakes going on here.

  • You shouldn't have div elements in list items
  • You have a height without a unit in your HTML height:73;
  • your ul element is needlessly encapsulated in a div, as are your links inside your list items.
  • You are mixing inline styles with a linked stylesheet.

Can you describe more of what your are trying to accomplish, or do you have any examples?

I recreated what I think you are going for in a more cross browser compatibility way, let me know what you think.

Additionally, here is a Fiddle of the same code, but with the CSS split into a separate file: http://jsfiddle.net/FsvJ3/

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">

  <style type="text/css">
    html {
      padding: 0;
      margin: 0;
      background: #555;

    body {
      width: 800px;
      margin: 0 auto;

    #header {
      width: 100%;
      height: 200px;
      background: #222;

    #nav {
      background: #0e1a0c;
      float: left;
      list-style-type: none;
      margin: 0;
      padding: 0;

    #nav li {
      float: left;
      width: 100px;
      height: 40px;
      padding: 15px;
      border: 1px solid white;

    #nav li a {
      color: yellow;

  <div id="header"></div>

  <ul id="nav">
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>

I'd like to add that the way you were trying to center the content in the page (with the margin on either side of the body) would produce pretty strange behavior. I centered it by explicitly setting the width, and using auto for the left and right margins.

Ideally, I'd probably used a container of sorts inside of the body instead of giving these properties to the body element itself. But for simplicity sake I applied the styles directly.

I'd suggest not adding as many elements as you have, like what is the purpose of the div with the class navigationBar around the list? You can style the list element instead.

It's important to have only the markup you need and try to avoid markup that is only used to hook styles to.

share|improve this answer
I had been taught that pixels are the default unit. PS. Please check the question update . –  0x6B6F77616C74 Jun 4 '12 at 18:01
Everything except the height without a unit are poor coding practices, but aren't actually mistakes. They shouldn't affect the layout of his/her page at all. –  idrumgood Jun 4 '12 at 21:28
It's more about best practices, than what looks good. Sure you can add a bunch on nonsense in there, but why not have simple markup and explicit CSS properties? Poor coding practices, are mistakes, in my opinion. –  Joseph Silvashy Jun 4 '12 at 21:35


I don't understand where there is Gap between the grey Header and the navigation bar. And comment about the code? Yeah as Keith mentioned you can use

<li> class="navigationButton" ><a href="#link1">Button1</a></li>

And as already you have a stylesheet its good not to use inline style's like style="height:200px; width: 800px;"

And you could have formatted your code properly for more readability.

share|improve this answer
Can you be more specific? What is "messy" in my code? Also please check the question update :) –  0x6B6F77616C74 Jun 4 '12 at 17:59
Now its proper. Yesterday. Each line had multiple line breaks. And indentation was not proper too. –  Katti Jun 5 '12 at 12:34

you shouldn't be putting divs inside of li's you can just assign the li a class of navigationButton

I set up a jsfiddle with your code and am not seeing the gap your talking about...http://jsfiddle.net/qL8Ra/

share|improve this answer

Your Answer


