Float Text around and image

Has anyone gotten the CSS correct to float and image left or right using the magazine template? I have made a few attempts but either I break something else or not displayed correct. Basically want to wrap text around an image on a post

4 replies

The Magazine template does not yet have all of the layout features implemented. I will follow up here as soon as they are.

Answered a year ago · Improve this answer

Hi, I've just started using the Magazine template. I'm using float in a page to wrap text around images. Is that what you mean?

Answered 6 months ago · Improve this answer

I have been trying to do this too using the layout functionality, but I can't figure it out. Can you please post a markdown snippet?

Answered 3 months ago · Improve this answer

I'm not sure a Markdown snippet would help. So in my fork of Magazine, in the css-theme.css file, I just created two image classes — rimage and limage — plus the clearfix style. Because I wanted borders around my images, I defined those here as well:

.rimage { float: right; margin-top: 5px; border-top: 2px solid #b3cde0; border-left: 2px solid #b3cde0; border-right: 2px solid #b3cde0; border-bottom: 2px solid #b3cde0; }

.limage { float: left; margin-top: 5px; border-top: 2px solid #b3cde0; border-left: 2px solid #b3cde0; border-right: 2px solid #b3cde0; border-bottom: 2px solid #b3cde0; }

.clearfix { overflow: auto; }

Then in my Markdown, I include the following html:

<div class="clearfix">
<p><img class="limage" src="../Images/_rocket.jpeg"  style="width:33%;height:33%;margin-right:15px;">The text you intend to wrap around the image goes here...</div>

I'm not a coder or developer, so your mileage may vary...

Answered 3 months ago · Improve this answer

Markdown allowed
Question or feedback?
Contact us

Tags

developers 28 questions bug 14 questions posts 9 questions resolved 7 questions request 6 questions google-drive 5 questions configure 4 questions pages 3 questions added 3 questions meta 3 questions More tags →
Subscribe for changes
RSS Feed of latest questions