The following may sound familiar: you have a row of floating divs with varying heights and want to align them neither top nor bottom – but vertically centered? In the good old days of table-layouts that was easy. You would just throw the divs in one table cell each and tell that cell to display its content valign=”middle”.
But in times with mostly CSS powered design that might sound a little bit difficult. But ‘table’ is the right keyword here: you can use a containing outer div (container / parent object) with the behavior ‘table row’ and give the contained inner divs (child objects) the behavior ‘table-cell’ – then you can apply the css property vertical-align: middle – and Bob’s your uncle.
Here’s a jsfilddle with a working example:
And this question-answer-post at brought me to the above fiddle:
“How to center vertically a floating div inside an inline-block?”
Having floating divs not stretching the parent container to their full height is re-occurring problem in daily webdesign business. And since I’m looking for a solution every now and then, I decided to finally write down the easiest solution that I could find looking for “make container div the height of contained divs”. Here we go:
The problem: you have a box (the parent / container div) filled with floating divs (the child / contained divs). The inner divs have ‘real’ content, stretching them to a certain height. The outer, container / parent div however won’t naturally get the height of the inner elements, since they are floating.
Solution: add the css behaviour “overflow:auto” to the container / parent element.
Since the article on sitepoint is from 2005 I suppose the solution does work also on older browsers.
Another note-to-self – and maybe / hopefully somebody else might also find this note useful…
The problem: The Drupal 7 module “node gallery” installed just fine and is running well. Additionally I installed the Plupload module for drag’n’drop and multi-file upload functionality – but no upload form / no upload option at all is actually happening.
Solution: there is a misleading detail in the readme.txt that comes with the module – or actually in the file structure / naming that comes with the module Plupload:
The installation instructions in readme.txt suggest that you need to upload the file plupload.full.js – but at the suggested location there is instead the minimized version of that file plupload.full.min.js.
The module will perfectly work if you first rename the file. So all you would have to do is remove the “.min” from the file name and upload the file – and everything is fine. The module works as intended and there you’ll have your drag’n’drop- and mupload functionality.