Позиционирование текста и изображения над навигационной панелью. html/css

Question

Я пытаюсь создать веб-сайт, на котором находится логотип с левой стороны, а текст справа (вместе с логотипом) и все, что находится над панелью навигации, однако я просто не могу получить они в позиции вообще!

CSS

.headerLogo{ 
    float:left; 
    margin-top: 20px; 
} 

.headerText{ 
    float:right; 
    margin:auto; 
} 

HTML

<div class="headerLogo"> 
<img src="Logo.gif" /> 
</div> 

<div class="headerText"> 
<h1>Together, we can create change.</h1> 
<p>Qui cu imperdiet temporibus, nam at autem falli, cum audire salutandi abhorreant 
eu. No postea mollis lobortis pri. Natum pertinax consulatu eam an, an vix omnium 
appellantur, tamquam petentium cotidieque ut pri. In sea aliquid omittantur.</p> 
</div> 

<nav> 
    <ul class="nav"> 
     <li><a href="home.html">Home</a></li> 
     <li><a href="about.html">About Us</a></li> 
     <li><a href="volunteer.html">Volunteer</a></li> 
     <li><a href="donate.html">Donate</a></li> 
    </ul> 
</nav> 

Answer 1

Я немного смущен формулировкой, но, пожалуйста, посмотрите на это решение и посмотреть, если это то, что вы имеете в виду, в противном случае я отредактирую ответ

Jsfiddle: http://jsfiddle.net/gLLa20yp/

img{ 
    display: inline-block; 
    float: left; 
    width: 10%; 
} 

nav{ 

    margin-top: 5% 
} 

.nav li{ 
    display: inline-block; 
    margin-left: 15%; 
} 

удалите последнюю часть, если вы не хотите горизонтального меню.

Будущая работа: Для того, чтобы сделать его лучше, я бы предложил установки ширины на <p> элемента и дает запас между изображением и текстом

Answer 2

Чтобы установить соответственно, попытаться дать стили, как показано ниже, имеющий DIV как положение относительный.

.headerLogo { 
float:left; 
margin:auto; 
display:inline-block; 
} 

.headerText { 
margin-top: 10px; 
margin-right: 20px; 
float: right; 
position: relative; 
display:inline-block; 
}