I have a content type with image and body fields. I am trying to edit the css so that the picture is on the left and the body/text is on the right with all the text staying in a column on the right rather than wrapping around the bottom of the picture. I attached a picture. I want what is show on the bottom. What is shown on the top is what I currently have. I don't want to use a module such as Panels or Display Suite.

Thanks for you input!

enter image description here

closed as off-topic by Bala, Mołot, AjitS, googletorp Jul 8 '14 at 8:13

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on programming, PHP, SQL, etc. that do not relate directly to Drupal are off-topic here, but can be asked on Stack Overflow." – Bala, AjitS, googletorp
If this question can be reworded to fit the rules in the help center, please edit the question.

  • "I don't want to use a module such as Panels or Display Suite." I'm afraid that this question has nothing to do with Drupal then. :( – Adam Balsam Jun 19 '14 at 20:54
  • Maybe, maybe not. I could be hitting up against something in the theme which is Corolla or maybe I'm just confused about how things work. Either way, it is a Drupal site and I'm trying to alter the theme. – klequis Jun 19 '14 at 22:42

This appears to be about primarily about the CSS, and the right answer depends on how the html is structured.

Have you tried any resources like Learn CSS Positioning in Ten Steps?

If there are already some containers, you can float both the containers left and give them specific widths (probably). Or you could use absolute positioning. Do you have to account for the picture potentially NOT being there?

My best suggestion is to use Firebug or Inspector or similar to try out a couple things based on your DOM

  • It turned out to be CSS. I'm a long-time Windows developer learning Drupal/web since last Dec. CSS is a real weakness which I'll be addressing in the weeks/months including your suggested resource which I'll start on in the morning. Thank you. – klequis Jun 20 '14 at 3:38
  • The CSS tutorial was excellent and helped me get the rest of the items in the layout to stay put when the window sizes. Thanks again. – klequis Jun 20 '14 at 14:37

Use property inspector or firebug to get the class of id names of your picture and body.

In chrome I just right click the photo, and click Inspect Element.

You should find the dome elements where the photo and the body are siblings.

Then add a float: left; to the photo.

Let's say your photo is 300px wide. Add a margin-left: 310px; to your body.

I use this all the time. It would look something like this:

enter image description here

  • My selectors .article .field-name-field-article-pic-left-image {float: left; width:50%;} & .article .field-name-field-article-body {witdh:50%; margin-left: 300px} were working but I had a float:right; in the 2nd which was messing things up which I took out after reading you suggestion - thanks! – klequis Jun 20 '14 at 3:34

are you planning to integrate the wysiwyg editor? with that option you could even control the size of the pictures and you can adapt it with the insert module to make sure that they can only insert certain sizes of the pictures. In that way you can make your users have certain control.

The following link has a conference helped me a lot to integrate the editor, you can create your own classes and help control better how everything is displayed Best practice for wysiwyg editor

  • Yes, I am planning to integrate the wysiwyg editor and the functionality you are mentioning will be a real plus for site usability - thanks! – klequis Jun 20 '14 at 3:14

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