Databases
StackOverflow2013
Postsdbo
POjquery masonry positioning / overlapping
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery masonry positioning / overlapping
    primarykey
    data
    text
    <p>I have a tab div at the top before the divs for masonry but when i run the code, its going ontop of the tabs and i have no idea what i can do to try and fix this issue.</p> <pre><code> $(document).ready(function ($) { $('#tabs').tab(); }); $(document).ready(function(){ $("#posts").masonry({ itemSelector: '.post', isAnimated: true }); }); </code></pre> <p>and this is my div</p> <pre><code> &lt;div id="posts"&gt; &lt;div class="post span3"&gt; &lt;div&gt;&lt;a href="#"&gt; &lt;img src="http://reformrevolution.com/wp-content/uploads/rr_20things1.jpg"&gt;&lt;/img&gt; &lt;h6&gt;The Title of the Picture / Descriptions&lt;/h6&gt; &lt;/a&gt; &lt;p&gt;---&lt;/br&gt;Published by Victor Weng.&lt;/br&gt;Date Jan,21,2000&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="post span3"&gt; &lt;div&gt;&lt;a href="#"&gt; &lt;img src="http://reformrevolution.com/wp-content/uploads/cities-iv-04.jpg"&gt;&lt;/img&gt; &lt;h6&gt;The Title of the Picture / Descriptions&lt;/h6&gt; &lt;/a&gt; &lt;p&gt;---&lt;/br&gt;Published by Victor Weng.&lt;/br&gt;Date Jan,21,2000&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="post span3"&gt; &lt;div&gt; &lt;h4&gt; When life gives you a hundred reasons to cry, show life that you have a thousand reasons to smile. &lt;/h4&gt; &lt;p&gt;---&lt;/br&gt;Published by Victor Weng.&lt;/br&gt;Date Jan,21,2000&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>this is the tab html code</p> <pre><code> &lt;div class="row span12 tabbable"&gt; &lt;ul class="nav nav-tabs" data-tabs="tabs" id="tabs"&gt; &lt;li class="active"&gt;&lt;a href="#life" data-toggle="tab"&gt;Life&lt;/a&gt;&lt;/li&gt; &lt;li class=""&gt;&lt;a href="#sci" data-toggle="tab"&gt;Science&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="tab-content"&gt; &lt;div class="tab-pane active" id="life"&gt; &lt;div class="row"&gt; &lt;div class="span4"&gt; &lt;h3 class="cPink"&gt;Life Article Title&lt;/h3&gt; &lt;p&gt;Sed bibendum ultricies quam non laoreet. Suspendisse ut odio vitae eros bibendum aliquam. Phasellus quis sapien leo, vel consequat massa. Duis vel suscipit lorem. Nam eu urna id leo molestie ullamcorper eget id eros. Aenean venenatis mattis lorem, a elementum odio accumsan et. Suspendisse cursus metus feugiat tortor molestie vitae porta sapien ultricies. Fusce malesuada sodales commodo. &lt;/p&gt; &lt;a class="pull-right" href="#"&gt;Read More --&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="divider-vertical"&gt;&lt;/div&gt; &lt;div class="span4"&gt; &lt;h3 class="cPink"&gt;Life Article Title&lt;/h3&gt; &lt;p&gt;Sed bibendum ultricies quam non laoreet. Suspendisse ut odio vitae eros bibendum aliquam. Phasellus quis sapien leo, vel consequat massa. Duis vel suscipit lorem. Nam eu urna id leo molestie ullamcorper eget id eros. Aenean venenatis mattis lorem, a elementum odio accumsan et. Suspendisse cursus metus feugiat tortor molestie vitae porta sapien ultricies. Fusce malesuada sodales commodo. &lt;/p&gt; &lt;a class="pull-right" href="#"&gt;Read More --&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="divider-vertical"&gt;&lt;/div&gt; &lt;div class="span4"&gt; &lt;h3 class="cPink"&gt;Life Article Title&lt;/h3&gt; &lt;p&gt;Sed bibendum ultricies quam non laoreet. Suspendisse ut odio vitae eros bibendum aliquam. Phasellus quis sapien leo, vel consequat massa. Duis vel suscipit lorem. Nam eu urna id leo molestie ullamcorper eget id eros. Aenean venenatis mattis lorem, a elementum odio accumsan et. Suspendisse cursus metus feugiat tortor molestie vitae porta sapien ultricies. Fusce malesuada sodales commodo. &lt;/p&gt; &lt;a class="pull-right" href="#"&gt;Read More --&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="tab-pane" id="sci"&gt; &lt;div class="row"&gt; &lt;div class="span4"&gt; &lt;h3 class="cPink"&gt;Science Article Title&lt;/h3&gt; &lt;p&gt;Sed bibendum ultricies quam non laoreet. Suspendisse ut odio vitae eros bibendum aliquam. Phasellus quis sapien leo, vel consequat massa. Duis vel suscipit lorem. Nam eu urna id leo molestie ullamcorper eget id eros. Aenean venenatis mattis lorem, a elementum odio accumsan et. Suspendisse cursus metus feugiat tortor molestie vitae porta sapien ultricies. Fusce malesuada sodales commodo. &lt;/p&gt; &lt;a class="pull-right" href="#"&gt;Read More --&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="divider-vertical"&gt;&lt;/div&gt; &lt;div class="span4"&gt; &lt;h3 class="cPink"&gt;Science Article Title&lt;/h3&gt; &lt;p&gt;Sed bibendum ultricies quam non laoreet. Suspendisse ut odio vitae eros bibendum aliquam. Phasellus quis sapien leo, vel consequat massa. Duis vel suscipit lorem. Nam eu urna id leo molestie ullamcorper eget id eros. Aenean venenatis mattis lorem, a elementum odio accumsan et. Suspendisse cursus metus feugiat tortor molestie vitae porta sapien ultricies. Fusce malesuada sodales commodo. &lt;/p&gt; &lt;a class="pull-right" href="#"&gt;Read More --&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="divider-vertical"&gt;&lt;/div&gt; &lt;div class="span4"&gt; &lt;h3 class="cPink"&gt;Science Article Title&lt;/h3&gt; &lt;p&gt;Sed bibendum ultricies quam non laoreet. Suspendisse ut odio vitae eros bibendum aliquam. Phasellus quis sapien leo, vel consequat massa. Duis vel suscipit lorem. Nam eu urna id leo molestie ullamcorper eget id eros. Aenean venenatis mattis lorem, a elementum odio accumsan et. Suspendisse cursus metus feugiat tortor molestie vitae porta sapien ultricies. Fusce malesuada sodales commodo. &lt;/p&gt; &lt;a class="pull-right" href="#"&gt;Read More --&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCœur
    1. USteemo
    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.
    1. COWhere is the 'tabs' `<div>` that you speak of? Is there any other `CSS` related to your question that you haven't shared already?
      singulars
      1. POjquery masonry positioning / overlapping
      1. USadaam
    2. COi pasted the code up, it was a bootstrap tab class i tried adding clear:both or other stuff like no floats thinking that it was due to those things.. but didn't workout
      singulars
      1. POjquery masonry positioning / overlapping
      1. USteemo
    3. COHere is a fiddle of your code: http://jsfiddle.net/pkhYb/1/ Apart from the fact that the tabs don't work, what is your problem? I'm finding it hard to see where there's any overlap
      singulars
      1. POjquery masonry positioning / overlapping
      1. USadaam
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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