UL not staying in one single line

Question

I tried what this said: How to style the UL list to a single line

display: inline;

and didn't work!

----------- My Code -----------

CSS:

*{
margin:0;
padding:0;
}

ul{
list-style:none;
}

#bottom_header{
background:#0F1923;
border-bottom:5px solid #0F67A1;
font-size:.95em;
font-weight:700;
height:31px;
padding:0 0 0 10px;
/*min-width:800px;*/
}

#bottom_header ul li{
font-size:.95em;
margin:0 0 0 6px;
padding:8px;
float:left;
display:inline;
}

#bottom_header ul li.active{
background:transparent url(./tab_left.png) no-repeat top left;
font-size:1.05em;
margin:-4px 0 auto 5px;
padding:0;
position:relative;
}

#bottom_header ul li.active a{
background:transparent url(./tab_right.png) no-repeat top right;
display:block;
margin:0 0 0 6px;
padding:10px 15px 10px 10px;
}

#bottom_header ul li.active,#bottom_header ul li.active a,#bottom_header ul li a:hover{
color:#fff;
text-decoration:none;
}

#bottom_header ul li,#bottom_header ul li a{
color:#aeaeae;
text-decoration:none;
}

HTML:

<div id="bottom_header">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
        <li class="left active"><a href="#">Active</a></li>
        <li><a href="#">Another</a></li>
    </ul>
</div>

Answer 1

You could just float all the lis the to the left.

Actually, you are doing that.

Just set a width on the <div id="bottom_header"> so that it doesn't wrap.

For example:

#bottom_header{
    background:#0F1923;
    border-bottom:5px solid #0F67A1;
    font-size:.95em;
    font-weight:700;
    height:31px;
    padding:0 0 0 10px;
    width:800px;  /* ADD A WIDTH */
}

Example: http://jsfiddle.net/CtkrZ/

EDIT

As per your comment below:

edit: I set 100% width and didn't fix that (also it created an annoying horizontal line at all times on the whole page)

Remove the width from the div and add it to the ul. Give the ul an overflow:hidden; too.

ul{
    list-style:none;
    overflow:hidden;
    width:500px;   
}

#bottom_header{
    background:#0F1923;
    border-bottom:5px solid #0F67A1;
    font-size:.95em;
    font-weight:700;
    height:31px;
    padding:0 0 0 10px;
}

Updated Example: http://jsfiddle.net/CtkrZ/1/

Answer 2

ul > li{
   float: left;
}

OR

ul > li{
   display: inline;
}