Prevent Text Wrap in Wordpress Posts

Question

Does anyone have any good advice on how to prevent the text from wrapping around the image in a Wordpress post? I haven't had any luck with Google, and the only solution I've figured out so far is to add to the padding or margin at the bottom of the image, but that seems like an imperfect solution. I could probably use a table too, but I'm not sure that's the best solution either. I've tried using the whitespace attribute with css, but that's not really doing what I want either. 
Here is an example of what I want http://www.xtremecouturemma.com/Coaches/Coaches_Home.asp I believe they're using a table, but it seems like there should be a better way.

James Barnett · Accepted Answer

@Martin - Check out this new codepen (http://codepen.io/JamesBarnett/full/uxEqv), I think it does what you are looking for.
As an aside, we can't help you fix your code without seeing it.  This is why it's always best to create a reduced test case (http://css-tricks.com/reduced-test-cases/) when asking for help online.

justinw · Answer

@James Barnett (https://teamtreehouse.com/jamesbarnett)  you beat me to it, and your answer is probably better than mine but I will keep it up here.
To be honest the only way I've been able to accomplish something like this is by altering the html in a post. I know it's following your imperfect solution, but that's what I've been doing. Wordpress isn't as intuitive as they claim to be, I've always needed some basic html / css skills when building a site/blog in WP.

Martin Rheaume · Answer

I'm not asking anyone to fix my code. I'm asking how to accomplish a basic task. Would you need to see my code if I asked how to color text red with css? I want to know if there is a preferable way to prevent a text from wrapping around an image. If there is there is. If there isn't there isn't. My code has nothing to do with it. I will keep the reduced test case in mind for next time, but I completely fail to see how whether or not I provide code is necessary in this case.

Martin Rheaume · Answer

I don't know James. That codepen example doesn't look like what I'm aiming for. The text doesn't start until the bottom of the image. I can't provide a link to the site I'm working on, because I'm developing locally, but I don't see how that makes a difference. I provided a link to an example of what I want it to look like. 
Justin, I have no problem altering the html or the css. I'm just looking for the best way to accomplish the clean look I'm going for. It's not some strange thing. It's something I see all the time.
```
This
xxxx    lklkjljljl;lj
xxxx    ljljl;j;j;lj;lj
xxxx    lkjlkjlk;jk
          lkjlkjkllj
          ljlkjlkj;l;lj
NOT
xxxx    lklkjljljl;lj
xxxx    ljljl;j;j;lj;lj
xxxx    lkjlkjlk;jk
lkjlkjkllj
klj;kljl;kjl;
```

James Barnett · Answer

@martinrheaume - Maybe I'm missing something here, as you didn't post your a link to the site you are having issues with, 
But couldn't you just ... float the image right and the text left.
I made a quick and dirty example using codepen (http://codepen.io/JamesBarnett/pen/LoBIb) to show you what I mean.
Let me know if I missed something.

Welcome to the Treehouse Community

Looking to learn something new?

Martin Rheaume

Martin Rheaume

Prevent Text Wrap in Wordpress Posts

5 Answers

James Barnett

James Barnett

justinw

justinw

James Barnett

James Barnett

Martin Rheaume

Martin Rheaume

Martin Rheaume

Martin Rheaume