How to align two objects on same line?

Question

I'm working on a project which should have two boxes in the upper left hand corner, but then centered text on the same line, seen here: http://jsfiddle.net/charliedean/Gqq6w/23/ . But I'm running into a simple problem with CSS (I'm a novice). The h1 should be aligned center, but the boxes should be in the upper left corner, so here's the code:

.box {
margin: 5px;
background: #fff;
color: #000;
text-align: center;
padding: 20px;
height: 50px;
width: 50px;
line-height: 50px;
font-family:'Francois One', sans-serif;
float: left;
position:relative;
left:0;
top:0;

h1 {
font-family:'Francois One', sans-serif;
font-size:100px;
color:#fff;
float:center;

There's going to be a center aligned jpeg below that. Any help?

Answer 1

change h1 style like this:

h1 {
    font-family:'Francois One', sans-serif;
    font-size:100px;
    color:#fff;
    clear:both;  /*  added  */
    text-align:center;  /*  instead float:center */
}

jsFiddle

---

update: if you want to put them in the same line try like this:

Working DEMO

HTML

<div class="menu">
    <a href="http://google.com"><div class="box">HOME</div></a>
    <a href="http://google.com"><div class="box">HOME</div></a>
</div>
<h1>LEVEL ONE<h1>

CSS

h1 {
    font-family:'Francois One', sans-serif;
    font-size:100px;
    color:#fff;
    text-align:center;
    line-height: 100px;
}
.menu{
    width:auto;
}