Databases
StackOverflow2013
Postsdbo
POWhy aren't my pictures placed to the right side of the text?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy aren't my pictures placed to the right side of the text?
    text
    copied!<p>Hi would you know why my pictures are placed under my text articles and not on the right side as I would like? Many thanks <a href="http://jsfiddle.net/2RqGu/1/" rel="nofollow noreferrer">http://jsfiddle.net/2RqGu/1/</a></p> <p><strong>Pictures placed under the next instead of right-side of the text:</strong> <img src="https://i.stack.imgur.com/7qSPR.png" alt="enter image description here"> HTML</p> <pre><code>&lt;div class="block width100 white-background"&gt; &lt;ol class="block_numbers"&gt; &lt;h3&gt;Notre approche&lt;/h3&gt; &lt;li&gt; &lt;p&gt;&lt;strong&gt;Title 1&lt;/strong&gt; &lt;/p&gt; &lt;div class="element"&gt; &lt;article&gt; &lt;p&gt;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.&lt;/p&gt; &lt;img src="http://placehold.it/150x150" /&gt; &lt;/article&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;p&gt;&lt;strong&gt;Title 2&lt;/strong&gt; &lt;/p&gt; &lt;div class="element"&gt; &lt;article&gt; &lt;p&gt;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.&lt;/p&gt; &lt;img src="http://placehold.it/150x150" /&gt; &lt;/article&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ol&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>.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 &gt; li { list-style: none outside none; margin: 0 0 27px; position: relative; } .block_numbers &gt; 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; } .element { width:100%; display:table; background:rgb(134, 226, 255); margin:10px 0px; padding:10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } p { display:table-cell; height:100%; vertical-align:top; background:white; } img { display:table-cell; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload