CSS Div Выравнивание и позиционирование

Question

Я пытаюсь создать страницу, похожую на это: http://bit.ly/1T8xGqP В частности, я говорю о строке с парнем, который находится на кухне.

Как я предполагаю, эта строка состоит из текстового контейнера и контейнера изображений, инкапсулированного внутри контейнера строк.

Когда окно становится меньше, изображение, похоже, перемещается за столбцом текста.

Когда окно сделано больше, текстовая колонка прикрепляется к стороне столбца изображения. Колонка изображения всегда держится в правой части экрана.

Мне не удалось создать что-то подобное.

Вот мой код:

HTML

<div id="row_container"> 

    <div id="image_container"> 
    <img src="images/1297x756_image.jpg" width="1297px" height="756px" border="0" /> 
    </div> 

    <div id="text_container"> 
    text 
    </div> 

</div> 

CSS

#row_container {  
width: 100% 
height: 756px; 
background-color:black; 
position:relative; 
} 

#image_container{ 
width: 1297px; 
height: 756px; 
background-color:#03C; 
position:absolute; 
right: 0; 
} 

#text_container { 
width: 383px; 
height: 756px; 
background-color:blue; 
position:absolute; 
left:0px; 
} 

Можете ли вы помочь мне исправить это? Спасибо!!!

Answer 1

Вы должны плавать изображение и текст и избегать использования положения: абсолютное.

CSS

#row_container { 
    width: 100%; 
    height: 756px; 
    background-color:black; 
    float:right; 
    background-color:#03C; 
    position:relative; 
} 
#image_container{ 
    width: 912px; 
    height: 756px; 
    background-color:#03C; 
    float:right; 
    right: 0; 
} 
#text_container { 
    width: 383px; 
    height: 756px; 
    background-color:blue; 
    float:left; 
    left:0px; 
} 

HTML

<div id="row_container"> 
<div id="image_container"> 
<img src="http://www.planwallpaper.com/static/images/a601cb579cc9a289bc51cd41d8bcf478_large.jpg" width="100%" height="756px" border="0" /> 
</div> 
<div id="text_container"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales convallis bibendum. Donec ac elit id diam egestas ultricies. Curabitur porttitor nulla in odio porttitor congue. Ut eu magna justo. Etiam consectetur rutrum porttitor. Nullam tempus sodales volutpat. Sed interdum imperdiet tellus, id semper turpis facilisis vel. Curabitur sed ipsum nec nisl hendrerit viverra in ut felis.</p> 
</div> 

ли вернуться, если вы по-прежнему сталкиваются с какой-либо вопрос.