1

Using SharePoint 2013 (online), when I put either an Image Viewer web part or just an img tag in a Content Editor Web Part (CEWP) to the right or left of text in a CEWP that is in a web part zone that should be vertically aligned with the zone the text CEWP is in, the image pushes down the text CEWP.

This is a publishing site, and I've tried all kinds of variations.

Here is a screenshot in editing mode on the page where I have the image in the Header zone and the text CEWP in the Right zone: 1st screenshot

Here is a screenshot once the page is published, with the image displacing the text down: 2nd screenshot

It doesn't matter what the size of the image is or whether it is in a zone to the left or the right of the CEWP text web part. It doesn't matter if the image is a PNG or JPG.

1

This is a known issue - I've run into it several times myself. What I've always done to fix it is add some CSS to the page that re-aligns the web part. Here's what you can do:

  1. Use F12 to find the ID for the web part's container div.
  2. Add a Script Editor web part to the page, probably down at the bottom somewhere so it's out of the way. The web part will automatically be hidden.
  3. In the Script Editor web part, add the following CSS:
<style>
 #WebPartWPQ3 {float:top; vertical-align:top}
</style>

You shouldn't need both styles, one or the other should get what you want. And obviously, you need to use the ID for your web part, the one shown here is just an example.

If neither style does the trick, you can also put a negative margin on the top of the layer (ex. - margin-top:-50px), but normally I wouldn't recommend using a fixed value like that.

Note: If you don't want to use the direct ID for the web part, you can also use a CSS attribute selector and go by the web part title instead. The link below has more information on using selectors.

http://www.heathersolomon.com/blog/articles/Controlling-Single-Web-Parts-with-CSS.aspx

  • Thanks, Omegacron. I think this may lead me in the right direction. Although try as I might with all kinds of CSS variations, I can't get the right webpart to align vertically with the left one. The best I can do is to float:left the left webpart, but then no variation I make with CSS aligns the right webpart at the top. I'll keep trying... – Mark Apr 28 '15 at 12:44
  • I just found out something that may provide a clue: it's only when I change the Appearance of the CEWP on the right so that I remove the title (border only or none), THAT's when it messes with the ability to set the CSS for that webpart to float:right. The title HAS to be there. So I think now I can do this with the title of the webpart showing and then just hide the title with CSS. – Mark Apr 28 '15 at 13:09
1

Omegracron was correct. The one gotcha with using a Script snippet to target the CSS is that the web parts in question CAN'T have their Titles turned off, because that puts them in another state where CSS doesn't work like it ought to.

Here WebPartWPQ2 is the web part on the right that I want to align vertically with the web part in a different zone on the left that should already be aligned vertically. Since I can't turn off it's Title in the web part's Appearance (but don't want it displayed when rendered), I hide the Title in the same snippet:

    <style>
    #WebPartWPQ2 {float:right;}
    #WebPartTitleWPQ2 {visibility:hidden;}
    </style>

Thanks for the help!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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