How to place a picture and a divider next to an article?

Question

What would be the best way to place a picture to the right of a text (text would take 70% with of the container) then would come a vertical line (i.e. border) and then the picture? I was thinking of creating tables with 3 columns but not sure this would be the best way to achieve his? http://jsfiddle.net/2RqGu/

What I would like to achieve:

How it looks now:

.block {    
    padding: 20px;
    background-clip: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #333;
}

.width100 {
    width: 100%;
}

.white-background {
    background: #fff;
}
.block_numbers {
    counter-reset: li;
    margin: 0 0 0 5px;
    padding-left: 0;
}

.block_numbers h3 {
    color: #3A7CDB;
    font-size: 28px;
    font-weight: 300;
    margin-top: 0;
}
.block_numbers p {
    display: inline-block;
    margin: 0 0 5px;
}
.block_numbers > li {
    list-style: none outside none;
    margin: 0 0 27px;
    position: relative;
}
.block_numbers > li:before {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #3A7CDB;
    border-radius: 2px;
    color: #FFFFFF;
    content: counter(li, decimal);
    counter-increment: li;
    display: inline-block;
    font-size: 13px;
    margin-right: 6px;
    padding: 1px 0;
    text-align: center;
    top: -2px;
    width: 22px;
}

  <div class="block width100 white-background">
          <ol class="block_numbers">
            <h3>Notre approche</h3>
            <li>
              <p><strong>L'entraînement</strong></p>
              <article>
                <p>eugiat neque. Vivamus placerat, mi sed vulputate euismod, enim justo pellentesque justo, sit amet aliquet tortor est ac turpis. Pellentesque consequat libero non fringilla dictum. Proin risus lectus, imperdiet tincidunt massa quis, consequat porttitor dui. Nam vel mi sed enim sollicitudin varius ut ac augue.</p>
              </article>
            </li>
            <li>
              <p><strong>Un entdsfdsesure</strong></p>
              <article>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elementum lectus a felis tristique mattis. Nullam dolor augue, tempor at risus in, faucibus venenatis eros. Phasellus adipiscing, nunc at mattis luctus, sem nunc mollis diam, sed tincidsfsdl nisl. Phasellus at justo nec lacus bibendum malesuada. Mauris vel tristique ante. Sed arcu arcu, malesuada eget nibh et, lobortis feugiat neque. Vivamus placerat, mi sed vulputate euismod, enim justo pellentesque justo, sit amet aliquet tortor est ac turpis. Pellentesque consequat libero non fringilla dictum. Proin risus lectus, imperdiet tincidunt massa quis, consequat porttitor dui. Nam vel mi sed enim sollicitudin varius ut ac augue.</p>
              </article>
            </li>
            <li>
              <p><strong>Vous et dfsnt</strong></p>
              <article>
                <p>Vestibulum ullamcorper eros elit. Quisque diam dui, iaculis vel velit vitae, pulvinar ornare lorem. Integer sagittis nisl eget arcu eleifend, ut facilisis ligula facilisis. Curabitur orci odio, pellentesque ut volutpat eu, scelerisque et nisl. Fusce tempor aliquam sem, eget commodo purus scelerisque at. Praesent bibendum velit ac nunc condimentum, eu tempus dui vestibulum. Etiam vel massa gravida, rhoncus sem a, consectetur purus. In blandit vel velit sed eleifend. Integer vel felis quis dolor tempus iaculis ac auctor orci. Praesent id malesuada libero, eu vestibulum eros.</p>
              </article>
            </li>
            <li>
              <p><strong>Des cdfsonnels</strong></p>
              <article>
                <p>Sed laoreet sapien pellentesque malesuada tempus. Vestibulum blandit libero nec nisi porttitor, eget hendrerit tortor ultricies. Fusce nunc lectus, elementum sed molestie porttitor, auctor in orci. Mauris turpis augue, congue dapibus sem eget, aliquet porta est. Curabitur vitae urna metus. Etiam eget adipiscing ipsum. Quisque ac orci dui. Ut elementum felis dolor, posuere imperdiet odio egestas et. Vestibulum interdum sit amet dolor at posuere. Duis facilisis libero et odio porttitor, vitae euismod libero rhoncus.</p>
              </article>
            </li>
          </ol>
        </div>

Answer 1

I don't think that using tables would be a good/correct solution.

Create a container for every article you have, In here you create 2 other divs. the first is your text. the seconds is your image. (not sure how to do the vertical lign.

  <div class="ArticleContainer">
    <div id="ArticleText">
      All your text here.
    </div>

    <div id="ArticleImage">
      here comes your image, which ofcourse contains no text. only a background-image
    </div>
 </div>

your css would be something like this

.ArticleContainer{
  width: your width;
}

#ArticleText{
 float: left;
 width: 70%;
}

#ArticleImage{
  float: right;
  width: 30%;
}

Hope this helped.

Answer 2

Tables are not the best way for layout. Find out why. Hence, it is suggestible to create two divs in the main container. One for the article text, the other for your article image.

HTML

<div class="text">
    Text
</div>
<div class="image">
    Image
</div>

CSS

.text {
    float: left;
    width: (in percentage for responsiveness);
}

.image {
    float: right;
    width: (allow it to not add up to 100% to have a margin);
    padding-left: 5px;
    border-left: 2px solid #eee;
}

The border property is to achieve the divider, while padding makes the border not stick to the image and rather in between the text and image. Adjust the width of the two divs so that it will look proportionate.