title: My CSS layout is not working the way it should
body: <p>Ok so I have my web page (<a href="http://jsfiddle.net/HVGBf/" rel="nofollow">http://jsfiddle.net/HVGBf/</a>) but it's not working the way I would like it to be working.</p>
  
  <p>As you see on a small browser the Logos text is jumping down because of the line-height.
  I'd like the Project Name to be abreast if possible, else i'd like it to be among each other but how can I accomplish that?</p>
  
  <p>Html: 
      
      
      </p>
  
  <pre><code>&lt;body class="home"&gt;    
      &lt;div id="wrapper"&gt;
  
          &lt;div id="logo"&gt;
              &lt;span&gt;Project name&lt;/span&gt;
          &lt;/div&gt;&lt;!-- endLogo --&gt;
  
          &lt;div id="menu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href=""&gt;Over ons&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href=""&gt;Projecten&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href=""&gt;Vrienden&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href=""&gt;Doneren&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt; 
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- endMenu --&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code> /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
  html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
  
  html, body { font-family: "helvetica", arial; margin: 0; padding: 0; height:100%;}
  
  #wrapper {
      min-width: 800px;
  }
  
  .home #logo { 
      background: #00B65F; 
      width: 22%;
      float: left;
      padding: 0 1% 0 2%; 
      text-align: right;
      -webkit-border-top-right-radius: 15px; 
      -webkit-border-bottom-right-radius: 15px;
      -moz-border-radius-topright: 15px;
      -moz-border-radius-bottomright: 15px;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px; 
  
      line-height: 180px;
      height: 180px;
      font-size: 220%;
  }
  .home #logo span {
      font-color: #000;
  }
  .home #menu {
      background-color: #000; 
      float: right; 
      background-repeat: repeat; 
      padding: 56px 5% 56px 1%; 
      -webkit-border-top-left-radius: 15px ;
      -webkit-border-bottom-left-radius: 15px;
      -moz-border-radius-topleft: 15px;
      -moz-border-radius-bottomleft: 15px;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px; 
      margin-left: 6%;
      width: 63%;
      height: 70px;
  }
  
  
  #menu ul { 
      float: left; 
      margin: 0; 
      padding: 0; 
      width: 100%;
  
  }
  #menu li { 
      float: left; 
      list-style-type: none;  
  }
  #menu a { 
      float: left;
      text-decoration: none; 
  
      font-size: 150%;
      color: #fff; 
      padding: 0.4em 0.7em 0.4em 0.7em;
      -webkit-border-radius: 10px; 
      border-radius: 10px;
      display: block;
  }
  
  #menu a:hover, #menu .active { background-color: #00B65F; }
  ​
  </code></pre>