Trouble with image alignment in Content block

Permalink
When I insert an image in the content block I am having alignment trouble. I can get it to float left or right, but cannot get it to align below the text unless the image is full width. When I can get the image to align beneath the text, because there is no more text in that content block, the content from the next content block (the content block below the first content block) wraps around the image.

So I guess it is an image alignment problem and a "blocks are bleeding over onto each other" problem.

I am trying to align the image using the Insert/Edit Image functionality, on the Appearance tab. No luck.
http://www.beerchurch.com

v5.4.1

Thanks for any help.

View Replies: View Best Answer
Shotster replied on at Permalink Reply
Shotster
It's unclear to me what you mean by "align below the text." Do you mean you want the text centered beneath the image? Have you tried making sure that the image and text are both inside the same paragraph <p> tags and then inserting a line break <br /> after the image? You can insert a break without viewing the HTML by pressing shift-return.

Also, what/where is the "Appearance tab?"

-Steve
beerchurch replied on at Permalink Reply
Thanks for the help Steve. Yes, I mean that I would like the image beneath the text (centered or not), followed by more text. I do not want the image aligned left or right of the text. Meaning, I don't want the text to wrap on either side of the image. I am not a complete newbie (but am a bit code challenged). I have never had this problem before.

The use of <br> tags etc. as you suggest does not work.

"Appearance Tab" - When editing the Content Block (in the Text Editor), select the image and then click on the toolbar's Edit/insert Image icon. The Edit/insert Image dialog box opens. There are three tabs. One of them is labeled "Appearance"

What I am finding MOST disturbing is the way the content in the second Content Block is wrapping up into the first Content Block. I've never seen C5 content blocks behave that way. Meaning, "Introducing Beer Church Pale Ale" is one content block and "You are Beer Church is a second content block. Currently onhttp://www.beerchurch.com you can see this problem.

thnx
guythomas replied on at Permalink Best Answer Reply
guythomas
I took a look at your site and found the following CSS rule, which is causing your text to wrap around your "Beer Church Pale Ale" image.

#content p img {
border:medium none;
float:left;
margin-bottom:10px;
margin-right:15px;
}


This is around line 206 of your style.css file.

Any image within a paragraph tag and the "Content" div will be forcible floated left. Remove this and your text will go below the photo.

If you want to align your image without text wrapping you will need to click the image and then use the right , left, center buttons in the main toolbar like you would for text. Let me know fi you have any other questions.

-Guy
beerchurch replied on at Permalink Reply
Thank you Guy,
That fixed things perfectly.

-Kendall