Html CSS Div对齐和定位

我正在尝试创建一个类似于以下内容的页面： 具体来说，我说的是和厨房里的那个家伙的争吵

正如我所设想的，此行由一个文本容器和一个封装在行容器中的图像容器组成

当窗口变小时，图像似乎移动到文本列的后面

当窗口变大时，文本列将粘贴到图像列的侧面。图像列始终位于屏幕的右侧

我一直无法创建这样的东西

这是我的密码：

HTML

---

你能帮我修一下吗？谢谢你

应该浮动图像和文本，并避免使用position:absolute

CSS

HTML

Lorem ipsum dolor sit amet，是一位杰出的献身者。苏打水饮料。不要让精英们知道自己的秘密。奥迪奥·波特托·康格的库拉比图尔·波特托·努拉。Ut eu magna justo。红葡萄酒。无糖即食苏打水。在不安全的情况下，我需要一个设备级的turpis。库拉比图尔在ut猫科动物中使用了ipsum nec nisl hendrerit viverra

---

如果您仍然面临任何问题，请务必回来。

我无法使文本容器粘贴到图像容器的左边缘。我意识到这是因为它绝对位于左侧，但我的代码的当前状态是我能够达到预期结果的最接近状态。这并没有解决问题。

<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>

#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;
}

#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;
}

<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>