Yearly Archives: 2013

how to align floating divs vertically ‘middle’

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:
jsfiddle.net/nH2sd/5/

And this question-answer-post at brought me to the above fiddle:
“How to center vertically a floating div inside an inline-block?”
stackoverflow.com/questions/…/how-to-center-vertically-a-floating-div-inside-an-inline-block

make container / parent div the height of contained / child divs

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.

see also:

“Simple Clearing of Floats” (sitepoint.com, 2005)
Here is a working example of the problem and solution: “Clearing Floats – Example 2“

Since the article on sitepoint is from 2005 I suppose the solution does work also on older browsers.

Drupal 7 node gallery with plupload but no upload [solution]

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.

sites/all/libraries/plupload/js/plupload.full.js

 vs.

 sites/all/libraries/plupload/js/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.