Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Strange no one has come up with a complete answer for this yet, ah well here it is.</p> <h2>Solution one: <em>clear: both</em></h2> <p>Adding a block element with the style clear:both; onto it will clear the floats past that point and stop the parent of that element from collapsing. <a href="http://jsfiddle.net/TVD2X/1/" rel="nofollow noreferrer">http://jsfiddle.net/TVD2X/1/</a></p> <p>Pros: Allows you to clear an element and elements you add below will not be effected by the floated elements above and valid css.</p> <p>Cons: Requires the another tag to clear the floats, bloating markup.</p> <p>Note: To fall back to IE6 and for it to work on abstinent parents (i.e. the input element) you are not able to use :after.</p> <h2>Solution two: <em>display: table</em></h2> <p>Adding display:table; to the parent to make it shrug off the floats and display with the correct height. <a href="http://jsfiddle.net/h9GAZ/1/" rel="nofollow noreferrer">http://jsfiddle.net/h9GAZ/1/</a></p> <p>Pros: No extra markup and is a lot neater. Works in IE6+</p> <p>Cons: Requires invalid css to make sure everything plays nice in IE6 and 7.</p> <p>Note: The IE6 and 7 width auto is used to prevent the width being 100%+padding, which is not the case in newer browsers.</p> <h2>A note on the other "solutions"</h2> <p>These fixes work back to the lowest supported browser, over 1% usage globally (IE6), which means using :after does not cut it.</p> <p>Overflow hidden does show the content but does not prevent the element from collapsing and so does not answer the question. Using an inline block can have buggy results, children having strange margins and so on, table is much better.</p> <p>Setting the height does "prevent" the collapse but it is not a proper fix.</p> <h2>Invalid css</h2> <p>Invalid css never hurt anyone, in fact, it is now the norm. Using browser prefixes is just as invalid as using browser specific hacks and doesn't impact the end user what so ever.</p> <h2>In conclusion</h2> <p>I use both of the above solutions to make elements react correctly and play nicely with each other, I implore you to do the same.</p>
    singulars
    1. This table or related slice is empty.
    1. POHow do you keep parents of floated elements from collapsing?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USlededje
    1. USlededje
    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. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COSince when did IE6 support `display: table`?
      singulars
      1. PO
      1. USBoltClock
    2. CO[rant] See http://caniuse.com/#feat=css-table, for a full compatibility list. IE 6 and 7 have _no_ support for `display: table;`. As for your other solution, it's already mentioned in the question which asks for "_Other_ suggestions". Please read the question and all answers before providing your own answer and downvoting others. Another point, invalid CSS may not "hurt" anyone but it's invalid CSS regardless, and vendor prefixes aren't just an accepted norm, look in the Chrome inspector and you'll see that it doesn't just consider them invalid, _they aren't processed at all_. [/rant]
      singulars
      1. PO
      1. USA.M.K
    3. CO[response to rant]First of all, the above methods are tested back to IE6 and they *all* work just fine. Supply a non-working example and get back to me. Vendor specific rules are not meant to be processed in browsers that they don't apply to (that's what vendor specific means...) So yes, of course they are not going to be processed... that's the point, but it still allows you to use bleeding edge css rules.[/response to rant]
      singulars
      1. PO
      1. USlededje
 

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