How to put Logo & navigation in one line

I have a css and HTML code which has two sections in the header: one for Logo and other one for navigation. I wanted to put both in the same line so that it saves some space and looks much better. Can som开发者_如何学编程eone guide me on how I can do that?

http://css.pastebin.com/AdGMQum5

1. Set width for your logo for example 100px;
2. Float:left; logo
3. Remove width:100%; and float:left; from #nav
4. Add overflow:hidden; for #nav
5. add clear:left; for #content

Live example: http://jsbin.com/eyozo

The easiest method is simply to use a background-image on the h1 element:

h1 {
    padding-left: 200px; /* width of the image plus a 'buffer' between image and text */
    height: 150px; /* vertical height of the image */
    line-height: 150px; /* to vertically-align the image with the text */
    background: #fff url(path/to/image.png) 0 0 no-repeat;
}