html - Выровнять текст рядом с другим элементом div

Question

Так что я в весьма своеобразной ситуации. Я пытаюсь создать заголовок, который включает значок моего веб-сайта в верхнем левом углу, и элемент навигации над ним (Img накладывает элемент Nav). Я хочу, чтобы текст в элементе Nav выравнивался рядом с изображением, накладывающим его на левую сторону.
Вот картина моей ситуации (Видимо не имеют достаточно респ размещать IMG):

http://i.imgur.com/qkVwwiw.png

Вот CSS для СЧА:

.nav { 
    line-height:30px; 
    background-color:#eeeeee; 
    height:70px; 
    width:100%; 
    text-align:left; 
    position: absolute; 
    top: 70px; 
    left: 0; 
} 

Угловая IMG :

div.cornerimg { 
    margin: 5px; 
    padding: 5px; 
    height: auto; 
    width: auto; 
    position: absolute; 
    top: 0; 
    left: 70px; 
} 
div.cornerimg img { 
    float: left; 
    display: inline; 
    margin: 5px; 
    -webkit-border-bottom-right-radius: 151px; 
    -webkit-border-bottom-left-radius: 151px; 
    -moz-border-radius-bottomright: 151px; 
    -moz-border-radius-bottomleft: 151px; 
    border-bottom-right-radius: 151px; 
    border-bottom-left-radius: 151px; 
} 

И, конечно, HTML:

<div class="nav"> 
    <a href="home.htm"> Home |</a> 
    <a href="download.htm"> Download |</a> 
    <a href="suggestions.htm"> Suggestions |</a> 
    <a href="https://sites.google.com/site/xeondosbatch/" target="_blank"> Google Site |</a> 
</div> 

<div class="cornerimg"> 
    <a href="home.htm"> 
    <img src="C:\Users\(User)\Desktop\Webpage\homeimg.png" alt="XeonDOS" width="250"    height="230"> 
    </a> 
</div> 

Так, мы надеемся, вы можете увидеть текст позади IMG, но я хочу, чтобы попытаться выровнять текст рядом с «XeonDOS» изображение, перекрывающей текст.

Просто скажите мне, как разместить текст центра рядом с элементом div, это было бы здорово!

Answer 1

Я немного изменил структуру HTML. Я завернул ваши ссылки меню с <div id="navcontainer"></div> и дал margin-left347px.

div.cornerimg { 
 
    margin: 5px; 
 
    padding: 5px; 
 
    height: auto; 
 
    width: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 70px; 
 
} 
 
div.cornerimg img { 
 
    float: left; 
 
    display: inline; 
 
    margin: 5px; 
 
    -webkit-border-bottom-right-radius: 151px; 
 
    -webkit-border-bottom-left-radius: 151px; 
 
    -moz-border-radius-bottomright: 151px; 
 
    -moz-border-radius-bottomleft: 151px; 
 
    border-bottom-right-radius: 151px; 
 
    border-bottom-left-radius: 151px; 
 
} 
 
.nav { 
 
    line-height:30px; 
 
    background-color:#eeeeee; 
 
    height:70px; 
 
    width:100%; 
 
    text-align:left; 
 
    position: absolute; 
 
    top: 70px; 
 
    left: 0; 
 
} 
 
div#navcontainer { 
 
    margin-left: 347px; 
 
}

<div class="nav"> 
 
    <div id="navcontainer"><a href="home.htm"> Home |</a> 
 
<a href="download.htm"> Download |</a> 
 
<a href="suggestions.htm"> Suggestions |</a> 
 
<a href="https://sites.google.com/site/xeondosbatch/" target="_blank"> Google Site |</a> 
 

 
    </div> 
 
</div> 
 
<div class="cornerimg"> <a href="home.htm"> 
 
    <img src="http://placehold.it/350x150" alt="XeonDOS" width="250"    height="230"> 
 
    </a> 
 

 
</div>

jsFiddle Demo.

Answer 2

Это суть того, что вам нужно сделать:

HTML:

<div id='wrapping-div'> 
    <div id='image-div'></div> 
    <div id='nav-div'></div> 
</div> 

CSS:

#wrapping-div { 
    display: inline-block;   
} 

Answer 3

оставил 280px с .nav

left: 280px;