StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><code><p></code> tags are block-level elements. Use an inline element such as <code><span></code>:</p> <pre class="lang-html prettyprint-override"><code><div class="footer content"> <img src="Images/facebook.png" /> <img src="Images/twitter.png"> <span> Address line 1 Address line 2 Address line 3 </span> </div> </code></pre> <p>Alternatively, if you're able to use CSS, you can define both elements as <code>inline-block</code>:</p> <pre class="lang-css prettyprint-override"><code>.footer.content > img, .footer.content > p { display: inline-block; } </code></pre> <p><a href="http://jsfiddle.net/XDRja/1/" rel="noreferrer"><strong>Example 1 jsFiddle</strong></a></p> <p><a href="http://jsfiddle.net/XDRja/" rel="noreferrer"><strong>Example 2 jsFiddle</strong></a></p> <p><strong>EDIT:</strong> It might also be wise for semantics to use <code><address></code>, rather than <code><span></code>. For example:</p> <pre class="lang-html prettyprint-override"><code><div class="footer content"> <img src="Images/facebook.png" /> <img src="Images/twitter.png"> <address> Address line 1 Address line 2 Address line 3 </address> </div> </code></pre> <p>Since <code><address></code> is also a block-level element, you'll need to include the correct CSS as follows:</p> <pre class="lang-css prettyprint-override"><code>.footer.content > img, .footer.content > address { display: inline-block; } </code></pre> <p><a href="http://jsfiddle.net/2LBYy/" rel="noreferrer"><strong>Final jsFiddle example</strong></a></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