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!
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
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:
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
