Не получается разместить на странице div-контейнер с содержимым, которое прописывается по средством JavaScript с сайта Одноклассники. Хочу поместить данный объект, представляющий из себя gif-файл, обернутый в div-контейнер, получаемый ссылкой с сайта Одноклассники, в правый верхний угол, рядом с рисунком. Желательно, что бы контейнер вставал рядом (в линию) с изображением, имел отступ от изображения 10px, и доходил до конца страницы (отступ от правого края сверху и сбоку 5px)
! function(d, id, did, st) {
var js = d.createElement("script");
js.src = "https://connect.ok.ru/connect.js";
js.onload = js.onreadystatechange = function() {
if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
if (!this.executed) {
this.executed = true;
setTimeout(function() {
OK.CONNECT.insertContentWidget(id, did, st);
}, 0);
}
}
};
d.documentElement.appendChild(js);
}(document, "ok_content_widget", "https://ok.ru/group/54787859349522/album/54787860660242/941139944722", '{"topicTextIsFull":1}');
img {
height: 400px;
width: 600px;
}
.ok_content {
position: absolute;
left: 700px;
bottom: 430px;
width: 300px;
height: 100px;
border: 0;
padding: 0;
margin: 0;
}
<img src="../img/hefekranz-6166511_1920.jpg" alt="sweet bread">
<main>
<div id="ok_content_widget" class="ok_content"></div>
</main>
Пытался менять размер div-контейнера (класс ok_content), делать отступы, но ничего не получается, не могу ровно разместить объект. Он занял место справа вверху, но при этом не могу растянуть содержимое контейнера так, что бы было от рисунка до края экрана. Сейчас размер маленький, и увеличивая размер контейнера наблюдается наложение содержимого контейнера на рисунок. Исправить не получается.
.ok_content { position: absolute !important; left: 700px !important; bottom: 430px !important; width: 300px !important; height: 100px !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }