Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here you have an approach: <a href="http://jsfiddle.net/8mzsh/" rel="nofollow">Try it yourself</a></p> <p>HTML:</p> <pre><code>&lt;div class="sixteen columns outer_box"&gt; &lt;div class="inner_box articles"&gt; &lt;!--TITLE OF THE POST --&gt; &lt;h3 class="post-title"&gt;&lt;a href="&lt;?php the_permalink() ?&gt;" rel="bookmark" title="Permanent Link to &lt;?php the_title_attribute(); ?&gt;"&gt;THE TITLE&lt;/a&gt;&lt;/h3&gt; &lt;ul class="data"&gt; &lt;li&gt;Autor post link /&lt;/li&gt; &lt;li&gt;Category /&lt;/li&gt; &lt;li&gt;Time /&lt;/li&gt; &lt;li&gt;32&lt;/li&gt; &lt;/ul&gt; &lt;hr&gt; &lt;!--FIXED SIZE THUMBNAIL --&gt; &lt;div class="align_thumbnail_right"&gt; &lt;div class="thumbnail"&gt; &lt;img src="" width="250px" height="150px" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;!--TEXT --&gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. &lt;/div&gt; &lt;div id="buttonsPanel"&gt; &lt;div id="sharePanel"&gt; &lt;div id="facebook" class="shareButton"&gt; &lt;!--Code of Facebook Button --&gt; &lt;/div&gt; &lt;div id="twitter" class="shareButton"&gt; &lt;!--Code of Twitter Button --&gt; &lt;/div&gt; &lt;div id="google" class="shareButton"&gt; &lt;!--Code of Google plus Button --&gt; &lt;/div&gt; &lt;div id="links"&gt; &lt;a id="readLink" href=""&gt; &lt;span&gt;Read More&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></p> <p>CSS:</p> <pre><code>#sharePanel { width: 100%; } #buttonsPanel { margin-top: 10px; } .shareButton { width: 50px; height: 20px; float: left; margin-right: 5px; } #facebook { background: blue; } #twitter { background: #58FAF4; } #google { background: red; } #links { width: 120px; text-align: right; float: right; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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