How to get h1 and ul to stick on the same line

Question

Good day once again.

I have a (seemingly) simple problem. I'm trying to display <h1> and a <ul> 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.

The html code looks like this:

<div class="page">
   <div id="header">
            <h1>IRIS</h1>


            <ul id="menu">              
                <li><%: Html.ActionLink("Forsíða", "Index", "Home")%></li>
                <li><%: Html.ActionLink("Fréttir", "Index", "News")%></li>
                <li><%: Html.ActionLink("Greinar", "Index", "Article")%></li>
                <li><%: Html.ActionLink("Síðan Mín", "Index", "MySite")%></li>
                <li><%: Html.ActionLink("Spurt & Svarað", "QA", "Home")%></li>
                <li><%: Html.ActionLink("Upplýsingar", "Index", "Information")%></li>
            </ul>
    </div>
 </div>

And the css code I'm using looks like this:

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

Ok so the answer to the problem has been found, thanks to Mathieu and everyone else. This is what I used:

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

If anyone thinks of something better please post :)

Answer 1

Your selector for h1 was wrong :

h1
{
    margin:0;
    padding:0;
    display:inline;
}

And for ul and li, you dont need float

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

See fiddle here : http://jsfiddle.net/Y6D6p/