I have a custom content type with a image field and several other fields, how do I make the other fields appear next to or inline with the image?

3 Answers 3


Two ways here. The fields all have CSS that is unique to them. All CCK fields start with "field-" you can absolutely position the items or make them inline and then float the image on the left or the right.

I found a good blog post on this from my bookmarks.


You can also make a custom tpl file that drupal will call when it opens the given node type. The link to that is below. The prose used is interesting and shows their frustration over making these.



You might also create a view using the Views module to display the fields as columns in a table or use the Panels module with the custom layout to arrange the information however you want. Neither of these require and coding, although if you are not familiar with these modules it will take some to to learn them. The effort will be well worth it.

  • The Panels idea is a very good one. I managed to achieve my design idea and even more. I tried overwriting tpl.php files but coding is just not my thing. So I thank you @JoeS for your help.
    – ebv
    Oct 24, 2011 at 8:27

If you have a content type with image and several fields - including custom text fields, the image might push some or all of the text below. The solution depends on your theme, but it's often fixed with css (no need to make a custom view or template). Some themes use a clearfix::after for the display of these fields. So if you want to float your image to the right on the full nodes of a content type, you might try something like this:

/* Find a class matching a field or a group of text-fields. 
Replace mytype with your content type. (Replace myfield/myfield2 with your field names 
and repeat for each field that uses the clearfix-class). */
.node-type-mytype .node-full .field-name-field-myfield.clearfix::after, 
.node-type-mytype .node-full .field-name-field-myfield2.clearfix::after {
  clear: left;
.node-type-mytype .node-full .field-type-image {
  float: right;

(Make sure you hit the right fields only. If you edit/change the general clearfix-class, you will have other elements in your design collapsing. Try one or two colons clearfix:after)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.