title: How to get h1 and ul to stick on the same line
body: <p>Good day once again.</p>
  
  <p>I have a (seemingly) simple problem. I'm trying to display <code>&lt;h1&gt;</code> and a <code>&lt;ul&gt;</code> on the same line. I have used float, inline and many other ways but it doesn't seem to work. It is like the header doesn't want to play along with unordered list. All help appreciated.</p>
  
  <p>The html code looks like this:</p>
  
  <pre><code>&lt;div class="page"&gt;
     &lt;div id="header"&gt;
              &lt;h1&gt;IRIS&lt;/h1&gt;
  
  
              &lt;ul id="menu"&gt;              
                  &lt;li&gt;&lt;%: Html.ActionLink("Forsíða", "Index", "Home")%&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;%: Html.ActionLink("Fréttir", "Index", "News")%&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;%: Html.ActionLink("Greinar", "Index", "Article")%&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;%: Html.ActionLink("Síðan Mín", "Index", "MySite")%&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;%: Html.ActionLink("Spurt &amp; Svarað", "QA", "Home")%&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;%: Html.ActionLink("Upplýsingar", "Index", "Information")%&gt;&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>And the css code I'm using looks like this:</p>
  
  <pre><code>.page
  {
  width: 70%;
  margin-left: Auto;
  margin-right: Auto;
  }
  
  
  
  body
  {
  margin:0;
  padding:0;    
  background: url('/Content/Image/background-gradient.png') repeat-x;
  }
  
  
  #header
  {
  background-color: Gray;
  }
  
  #header h1:
  {
  margin:0;
  padding:0;
  display:inline;
  }
  
  ul#menu
  {
  display:inline;
  border:solid;
  border-width:1px;
  border-bottom: 1px #5C87B2 solid;
  padding: 0 0 2px;
  margin: 0;
  text-align: right;
  }
  
  ul#menu li
  {
  display: inline;
  list-style: none;
  }
  
  ul#menu li#greeting
  {
  padding: 10px 20px;
  font-weight: bold;
  text-decoration: none;
  line-height: 2.8em;
  color: #fff;
  }
  
  ul#menu li a
  {
  padding: 5px 10px;
  float:left;
  font-weight: bold;
  text-decoration: none;
  line-height: 2.8em;
  background-color: #e8eef4;
  color: #034af3;
  }
  
  ul#menu li a:hover
  {
  background-color: #fff;
  text-decoration: none;
  }
  
  ul#menu li a:active
  {
  background-color: #a6e2a6;
  text-decoration: none;
  }
  
  ul#menu li.selected a
  {
  background-color: #fff;
  color: #000;
  }
  
  #main
  {
  border: solid black;
  clear:both;    
  width:75%;
  padding: 30px 30px 15px 30px;
  margin-bottom: 30px;
  }
  </code></pre>
  
  <p><strong>Ok so the answer to the problem has been found, thanks to Mathieu and everyone else.
  This is what I used:</strong></p>
  
  <pre><code>#header h1
  {
      margin:0;
      padding:0;
      padding-left:7px;
      display:inline;
  }
  
  ul#menu
  {
      width:85%;
      float: right;
      display:inline;
      padding: 0 0 2px;
      margin: 0;
      text-align: right;
  }
  </code></pre>
  
  <p>If anyone thinks of something better please post :)</p>