Float an element next to fields with inline labels


A common display for images in nodes is to float them to the side of the page and have the rest of the content wrap around them. However this can be problematic when there are fields in the node with inline labels; Drupal clears these fields which pushes them below the floated image.

The solution is to replace Drupal's clearing method with a different one:
Remove the default 'clearfix' class from fields, then add a custom CSS clearing method to '.field-label-inline' fields.

Get raw version
  1. /**
  2.  * Overrides template_preprocess_field().
  3.  */
  4. function [THEME_NAME]_preprocess_field(&$variables, $hook) {
  5. // Remove 'clearfix' class from fields
  6. $key = array_search('clearfix', $variables['classes_array']);
  7. if ($key !== FALSE) {
  8. unset($variables['classes_array'][$key]);
  9. }
  10. }
Get raw version
  1. .field-label-inline {
  2. overflow: hidden;
  3. zoom: 1; /* Triggers 'hasLayout' in IE */
  4. }


Anonymous's picture

This worked great for me. Thank you!

Conrad's picture

I have been using to many hours dealing with this, and then I finally managed to figure out what I should write in google and found your wonderful solution. I am deeply grateful and sitting with my arms raised in victory over my head. All thanks to you.