The float with the image to the right without flowing around the text

Question

https://jsfiddle.net/calebp/ksnmggL5/light/

I'm having difficulty with the webpage I'm trying to make. In a related example, I have the images exactly where I want them (the larger one is aligned to the right, and the banner is aligned to the right and to the left of it). The problem is that I want the paragraph to be below the banner image. How can I make him go completely below him, instead of accidentally “swimming” in the distance?

<div style="width: 920px;">
<div style="clear: both; text-align: left;">
<a href="largeimage.png"><img border="0" src="largeimage.png"  style="float: right; margin-bottom: 1em; margin-left: .75em;"/></a>
<img border="0" src="banner.png" style="clear: left; float: right; margin-bottom: 1em;"/>
<p>THE PARAGRAPH</p>
</div>
</div>

Here is what I want it to look, but without a fixed width: https://jsfiddle.net/calebp/ksnmggL5/5/

Answer 1

div , .

Answer 2

. . , HTML. . , , div :

    .row{
      float:left;
      width:33%;
    }

    .paragraph {
      float:left;
      width:66%;
      margin-left:5px;
    }

p.s. , HTML- , ​​ Bootstrap. , .

DEMO

Answer 3

css.

. css . , HTML .

<div id="container">
    <div id="topBanner">
        <img />
        <div id="text">
            <p>THE PARAGRAPH</p>
        </div>
    </div>
    <div id="rightBanner">
        <a href="image.png"><img /></a>
    </div>
</div>

css

#container {
  width:187%;
}
#topBanner{
  width: 50%;
  float:left
}
#rightBanner{
  width: 50%;
  float: right;
}
#text{
  width: 100%;
}

jsFidle