Как разместить логотип и навигацию в одну строку

Question

У меня есть код CSS и HTML, в заголовке которого есть два раздела: один для логотипа, а другой для навигации.Я хотел поместить оба в одну линию, чтобы сэкономить место и выглядеть намного лучше.Кто-нибудь может подсказать мне, как я могу это сделать?

http://css.pastebin.com/AdGMQum5

Answer 1

1. Установите ширину для вашего логотипа, например 100px;
2. Float:left; logo
3. Удалить width:100%; и float:left; из #nav
4. Добавитьoverflow:hidden; для #nav
5. добавить clear:left; для #content

Пример в реальном времени: http://jsbin.com/eyozo

Answer 2

Самый простой способ - просто использовать background-image для элемента h1:

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