Позиционирование класса Div

Question

У меня возникли проблемы с получением некоторых элементов на странице, расположенной правильно. Как вы можете видеть на изображении ниже, это выглядит не очень красиво. Я пытаюсь получить текст в верхней половине страницы, чтобы позиционировать себя справа от изображения, чтобы позиционировать плакат фильма поверх (по оси z) «наложения градиента», чтобы он не седел ,

HTML (с глотка):

{% if movie.imgUrl.length > 0 %} 
<div class="topDivBanner" style="background-image:url({{movie.imgUrl}})"> 
{% else %} 
<div class="topDivBanner" style="background-image:url('blank.png')"> 
{% endif %} 
    <div class="bunnerOverlay"> 
     <h1>{{movie.title}}</h1> 
     <h5>{{movie.year}}</h5> 
     <p class="topDivText leftItem" id="movieLength">{{movie.runtime}} minutes</p> 
     <p class="topDivText leftItem" id="movieMore">{{movie.genres}}</p> 
     <p class="topDivText rightItem" id="movieYT"> 
      <a onclick="openLink('http://www.youtube.com/results?search_query={{movie.title}}+Trailer')">Trailer<i class="fa fa-youtube"></i></a> 
     </p> 
     <p class="topDivText rightItem" id="movieIMDB"> 
      <a onclick="openLink('http://www.imdb.com/title/{{movie.imdbId}}/')"> 
       IMDb: {{movie.imdbRating}}/10 ({{movie.imdbVotes}} votes) 
      </a> 
     </p> 
     <div class="topDivDes"> 
      {{movie.plot}} 
     </div> 
    </div> 
</div> 

<div class "rlsTable" style="width: 90%"> 
    <table style="border-spacing:20px"> 
    {% for release in movie.release %} 
    <tr> 
     <td><a class="asimple" onclick="openLink('http://www.torrentleech.org{{release.detailsUrl}}')">{{release.rlsDetails}}</a></td> 
     <td>{{release.size}}</td> 
     <td><i class="fa fa-arrow-up" style="color:green"></i>{{release.seeders}}</td> 
     <td><i class="fa fa-arrow-down" style="color:red"></i>{{release.leechers}}</td> 
     <td><a class="asimple" onclick="play('{{release.torrentUrl}}')"><i class="fa fa-play-circle"></i>Stream</a></td> 
    </tr> 
    {% endfor %} 
    </table> 
<div> 

CSS:

.topDiv { 
    display: inline-block; 
    height: 700px; 
    width: 1200px; 
    padding: 20px; 
    background-color: #EBEBEB; 
    color: rgba(27, 27, 27, 0.98); 
    overflow: auto; 
} 

.topDivFree { 
    padding: 0px; 
} 

.topDivBanner { 
    width: 100%; 
    height: 100%; 
    top:0px; 
    background-position: top left; 
    height: 445px; 
    margin-top: -10px; 
    background-color: white; 
    background-repeat: no-repeat; 
} 


.bunnerOverlay { 
    width: 100%; 
    height: 100%; 
    background-color: rgba(27, 27, 27,.75); 
    color:#EBEBEB; 
    position: relative; 
} 

.topDivText { 
    font-weight: normal; 
    margin: 10px 30px; 
    font-size: 17px; 
    line-height: 25px; 
    height: 25px; 
    width: 300px; 
    position: absolute; 
    display: inline-block!important; 
} 

.topDivDes { 
    width: 90%; 
    margin: 10px auto; 
    padding-top: 10px; 
    text-align: justify; 
    position: relative; 
} 

.movieOverlayEx { 
    margin-top: 20px; 
    margin-bottom: 20px; 
    width: 90%; 
    display: inline-block; 
} 

.showLeft { 
    float:left; 
    text-align: left; 
} 

.showRight { 
    float:right; 
    text-align: right; 
} 

Хотя он не показывает в моем коде, всплывающее окно с подробностями фильма (который описывает HTML) имеет стиль .topDiv и .topDivFree.

(Также приветствуются другие предложения по дизайну).

Answer 1

Вы можете попробовать работать с float. В самом простом использовании, поплавок свойство можно использовать, чтобы обернуть текст вокруг изображения, т.е.

img{ 
float: right; 
margin: 0 0 10px 10px; 
} 

Answer 2

Поместите текст DIV внутри серого одного DIV. margin-left - серый div, чтобы настроить его так, чтобы он не перекрывал изображение. для использования выравнивания по центру (отображение: «таблица») для свойства gray div и (display: «cell») для текста div. сообщите мне, если это сработает для вас.