I have a specific node type, in which I have several fields. I am trying to float the image field to the left, and wrap the other fields around it. But the "clearfix" classes on each field are preventing this. How do I float the image to the left and wrap the other fields around it?

I have tried selecting the "float image left" i the Adaptive theme settings, but that only wraps the first field. The other fields still stay cleared under the image.

I have also tried multiple css edits, including:

.field-type-image {
float: left;
margin: 0 15px 0 0;
}

Thanks!

CommentFileSizeAuthor
wrap.jpg320.51 KBwlftn

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Is this online where I can look at it?

wlftn’s picture

wlftn commented

Yes! At our dev site:

http://dsph.uiowa.edu/dhatiowa_dev/node/1

Jeff Burnz’s picture

Jeff Burnz commented

Even if the clearfix class were removed from the other fields this layout would still be problematic because they need to clear each other, say for instance the Category, Status, Email and Website fields need to stack rather than appear inline.

By far the easiest way to get the layout you want is to wrap those fields in some markup - the best way is to use something like Panels and Display Suite (or Panelizer), or Field Group module, or the alternative is to theme it manually (use a node type template and print the fields individually and wrap them in a div), however I tend to avoid the latter because even the slightest change generally requires you to write (more) code, rather than using the UI.

If you use Panels and Display Suite you can use AT's built in Panels layouts and your node content will be responsive also.

http://adaptivethemes.com/documentation/panels-gpanels-and-display-suite