Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Since your code base is already using <code>style</code> attributes (which I don't recommend using at all!), I'll give code samples using them.</p> <hr> <p>@Sami's approach is the most desirable solution since there are no messy <code>width</code> values being set, no worries about container element width changes, and no worries about text additions or subtractions.</p> <p>However, if you're looking for quick fixes without having to restructure code, I've got a couple for you even though I really recommend @Sami's approach. I'm really only posting this since I already went through the trouble of typing it out before @Sami posted a response.</p> <hr> <p>One possible solution would be to explicitly specify the width of the element containing your text, and then float it next to the image which is already floating.</p> <p>The issue here is that explicitly specifying the width as well as floating it is rather messy, difficult to maintain (using inline styles is difficult enough to maintain already), and leads to more potential issues.</p> <pre><code>&lt;p style="text-align: left; width: 375px;"&gt; &lt;em style="font-style:normal; display:block; width:273px; float:left;"&gt;INTERACTin was established 2 years ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of 40-50 staff. Offers 3 occupation types.&lt;br&gt; Operates across various Industries.&lt;/em&gt; &lt;/p&gt; </code></pre> <hr> <p>Another possible solution is to add padding below the image to make its box extend far enough down to cover the text.</p> <p>This approach is bound to fail if the containing element's width is ever changed or more text is added. Again, this makes it difficult to maintain.</p> <p>(I had to use <code>!important</code> in the code sample since your website already uses <code>!important</code> which, in general, is mostly unnecessary if you <a href="http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/" rel="nofollow">follow rules of specificity</a>.)</p> <pre><code>&lt;img src="http://inimitablesystems.com/demos/interactin/assets/assets/img/events-icon.png" class="pull-left" style="padding-bottom:60px!important;"&gt; </code></pre> <p><br></p>
 

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