Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><a href="http://jsfiddle.net/QUL9v/1/" rel="nofollow">http://jsfiddle.net/QUL9v/1/</a></p> <p>Using the p tags....</p> <pre><code>&lt;div id="container"&gt; &lt;p class="field"&gt;Title&lt;/p&gt;&lt;p class="field"&gt;Some Title&lt;/p&gt;&lt;div class="clear"&gt;&lt;/div&gt; &lt;p class="field"&gt;Author&lt;/p&gt;&lt;p class="field"&gt;Some Author&lt;/p&gt;&lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>with css:</p> <pre><code>.field { float: left; } .clear { clear: both; } </code></pre> <p>This is just sticking to the use of the p tag. Personally, this is how I would accomplish it (http://jsfiddle.net/QUL9v/3/):</p> <pre><code>&lt;div id="container"&gt; &lt;div class="field"&gt;Title&lt;/div&gt; &lt;div class="field"&gt;Some Title&lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="container"&gt; &lt;div class="field"&gt;Author&lt;/div&gt; &lt;div class="field"&gt;Some Author&lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The only reason I'm recommending this is because since this is more of a layout issue, it feels more natural to me to use the div as opposed to p element. Also, it will ensure the position of the text, regardless of what you put inside the divs (anchors, forms, tables, etc).</p> <p>Another thing you should pay attention to is I'm using the clear as the last sibling instead of the first (as in your examples). If you're clearing the front; then its possible that since your trailing elements are floated and inline, you're going to potentially run into errors down the road, especially with IE7. A lot of the times, the floating rule will get passed on to elements you never intended or thought it would be passed to. Clearing at the end ensures that this doesn't happen.</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