Log in Sign up

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


2 years ago, 4 replies   Edit question

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

Answered 3 years ago · Edit 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 2 years ago · Edit 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 2 years ago · Edit 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 2 years ago · Edit answer