Can't make float:left work on horizontal ul - html

Question

I've just finished a CSS3 class and I want to use what I've learned on my website. I want a horizontal bar across the top of the page with two images and some text between them, centered in the page. The problem is that I can't seem to get the float:left to work on the <li> elements.
I'll be using the same technique to put a menu below this bar. This is just the beginning of this page and may not even be the best design, I'm just trying to use in the real world what I learned in class a step at a time.
I'm trying to stay away from using classes everywhere in the HTML code, that's a lot of trouble in maintenance and changing things.
See my website.
Here's the HTML:
<div>
<ul id="topBar" class="clearfix">
<li><img src="../../images/heinleinmedalgold-glow150.jpg" /></li>
<li id="logo">pixelmeow's pages</li>
<li><img src="../../images/heart_grenade.jpg" /></li>
</ul>
</div>
Here's the CSS:
#import url(reset.css);
.clearfix:before, .clearfix:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
body {
width:100%;
}
#topBar {
width:100%;
height:10em;
background-color:black;
}
#topBar ul {
margin:0 auto;
}
#topBar ul li {
float:left;
list-style:none;
border:2px solid red;
height:5em;
display:inline-block;
}
#topBar ul li:first-child {
text-align:right;
}
#topBar ul li:nth-of-type(2) {
min-width:40%;
padding-top:5em;
text-align:center;
}
#topBar ul li:last-child {
text-align:left
}
#logo {
font-family:kells_uncialbold;
color:gray;
top: 50px;
}

Answer 1

Your selectors are incorrect. #topBar ul li should be #topBar li. What you have tries to select a <ul> that's a descendant of an element with the ID of topBar, when in reality it is the element with that ID. So you could use either #topBar li or ul#topBar li.
#import url(reset.css);
.clearfix:before, .clearfix:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
body {
width:100%;
}
#topBar {
width:100%;
height:10em;
background-color:black;
}
#topBar {
margin:0 auto;
}
#topBar li {
float:left;
list-style:none;
border:2px solid red;
height:5em;
display:inline-block;
}
#topBar li:first-child {
text-align:right;
}
#topBar li:nth-of-type(2) {
min-width:40%;
padding-top:5em;
text-align:center;
}
#topBar li:last-child {
text-align:left
}
#logo {
font-family:kells_uncialbold;
color:gray;
top: 50px;
}
<div>
<ul id="topBar" class="clearfix">
<li><img src="http://pixelmeow.com/images/heinleinmedalgold-glow150.jpg" /></li>
<li id="logo">pixelmeow's pages</li>
<li><img src="http://pixelmeow.com/images/heart_grenade.jpg" /></li>
</ul>
</div>

Answer 2

It's probably worth mentioning that a list here is probably not the best choice for layout. Also, you might have trouble centering when using floats.
JSfiddle Demo
div#topbar {
text-align: center;
background-color: black;
color: white;
}
div#topbar img {
vertical-align: middle;
}
#logo {
display: inline-block;
vertical-align: middle;
}
<div id="topbar">
<img src="http://pixelmeow.com/images/heinleinmedalgold-glow150.jpg" />
<h1 id="logo">pixelmeow's pages</h1>
<img src="http://pixelmeow.com/images/heart_grenade.jpg" />
</div>