Horizontal line near the picture

[amarantha]

We need to do the picture:

There are very many horizontal lines on the website (described red). They should be all over the bloc. But if the line is near the picture. float:left/rightthe line shall reach only the picture (+) margin) And it turns out that the line is stretched all wide and goes under the picture. Line made <div>- Tom:

.line {
  height:1px;
  margin:22px 0 26px 0;
  background:#c7c7c7;
  border-bottom:1px solid #fff;
}

If you do <hr> instead <div>the line is normal, but there are other problems, so... <hr> It doesn't work. Tell me, can we do this at all, and if you can?

[Avante]

Try to turn the image in. div with the coloured background and padding are equal to the necessary deviations of the picture.

<style type="text/css">
.line {
height:1px;
margin:22px 0 26px 0;
background:#c7c7c7;
border-bottom:1px solid #fff;
}
.img_wrapper {
float:left; 
padding:10px 10px 10px 0; 
background:#fff;
}
</style>
текст

<div class="img_wrapper"><img src="" /></div>

текст

<div class="line"></div>

текст

It's got to single-coloured.