Как создать 2 полноэкранных столбца, первый с отзывчивым изображением, а второй с текстом

Question

Я пытаюсь построить страницу с 2 столбцами. Первый я хочу занять 70% экрана, а другой столбец занимает 20%.

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

У тебя есть идеи?

Спасибо за ваше драгоценное время!

пример: http://www.screencast.com/t/0SddrUSln5

Некоторые методы следовали:

1) Bootstrap...

    <div class="col-xs-12 col-sm-6 col-lg-10">
<img src="img/intro_img.jpg" alt="" style="width:100%;">
</div>

<div class="col-xs-6 col-lg-2">
sidebar
</div>

2) полноэкранный скрипт jquery

http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/

Но я не могу понять, как создать боковую панель, которая "выдвигает" полноэкранное изображение и не перекрывает изображение.

3) Class "responsive-img"

Изображение никогда не заполняет 70% или 80% экрана, а в нижней части экрана имеется очень тонкое поле белого цвета. На самом деле в 83,67....% Когда это идет 84% полосы прокрутки появляется, поэтому нет полноэкранного столбца.

Я новый парень здесь... Я надеюсь, что объяснить правильно...

Answer 1

Это то, что я понимаю из вашего объяснения. jsfiddle

Можете ли вы поделиться своим, чтобы увидеть, где именно вы застряли?

HTML

<div class="content">
    <img src="http://placekitten.com/200/300" class="responsive-img" />
</div>
<div class="sidebar">
    text here
</div>

CSS

.sidebar {
    width: 20%;
    float: right;
    border: 1px solid;
    min-height: 250px;
}
.content {
    width: 70%;
    float: left;
    border: 1px solid;
    min-height: 250px;
}
.responsive-img {
    width: 100%;
}

Answer 2

Не уверен, что вы спрашиваете.... Но если вы хотите установить ширину div, чтобы он занимал только 20% экрана, вы можете использовать это:

 #div{
width: 20%
}

затем просто сделайте тег div с идентификатором div, и он займет 20% экрана.

Это то, что вы спрашиваете?