Databases
StackOverflow2013
Postsdbo
POadding an element in between a row of floated elements
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POadding an element in between a row of floated elements
    primarykey
    data
    text
    <p>I have a bunch of boxes that are aligned in a grid.</p> <p>They are all floated to the left, and then margin and width of one box is about 33%, so that once three boxes are next to each other, the next boxes are going in the next row. fairly even thirds.</p> <p><strong>This is what i start with:</strong> <img src="https://i.stack.imgur.com/xkqlN.png" alt="Start"></p> <p>when clicking on a box i now would like to add a box under the box i clicked on.</p> <p>i want to see it happening in a manner where pretty much just the space between the row of boxes is increased, and the new box is squeezed into that space.</p> <p><strong>This is what i would like to see:</strong> <img src="https://i.stack.imgur.com/GxXhN.png" alt="desired goal"></p> <p>currently i simply use jquery's <code>.after()</code> to add a box after the box i clicked on. this box has <code>clear:both;</code> and it will work perfectly, but ONLY when clicking on the third box... when i click on the second or first box, the following boxes of the same row are floated into the next row. <em>of course that's totally predictable, because it does exactly what i told it to do.</em> <strong>but i want them to stay there! i just dont know how.</strong></p> <p><strong>This is what i get instead:</strong> <img src="https://i.stack.imgur.com/dZaHv.png" alt="the problem"></p> <p><strong>what would be the best way to accomplish this?</strong></p> <p>Here is an example of my code: <a href="http://jsfiddle.net/z3ggf/1/" rel="nofollow noreferrer">http://jsfiddle.net/z3ggf/1/</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USolli
    1. USolli
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POadding an element in between a row of floated elements
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POadding an element in between a row of floated elements
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POadding an element in between a row of floated elements
      1. This table or related slice is empty.
      1. VTDownMod
    1. COMind if we get some more code so that we can see what you've done?
      singulars
      1. POadding an element in between a row of floated elements
      1. USFreeSnow
    2. COWell, it's doing exactly what you are telling it to do. Clearing the boxes after the div you clicked, throwing the others to the next line. Would be good to see some code, as mentioned by Xander.
      singulars
      1. POadding an element in between a row of floated elements
      1. USGiovanni Silveira
    3. COhere is the code: http://jsfiddle.net/z3ggf/1/
      singulars
      1. POadding an element in between a row of floated elements
      1. USolli
 

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