I hope this is the right place to ask this question. If not, please feel free to direct me to the appropriate place.
I’m using Basically Basic for a blog post. Since I’m a newbie to this forum, I’m apparently only allowed to upload one picture per post. So let’s do it this way - consider this picture:
What I want is “A”, above. But if I use code like this:
{: .align-left}
Something about the first picture.
{: .align-left}
Something about the second picture.
I end up with “B” (above).
Yes, I can use newlines or breaks or whatever, but that assumes I know the size of the image, and the size of the device being used.
I want something I can put after the first set of text and image, to basically say: Display the next stuff below the end of the previous text or image.
I thought maybe wrapping the first image and text in div’s or something might work, but either I don’t know what I’m doing (probably), or that’s not the answer.
A kramdown table didn’t work either, because the image gets resized by the table mechanism. I don’t want to use an HTML table because I want it to be responsive, and my HTML skills are really rusty.
Any help will be appreciated.
Thanks!
You’re using the .align-left class on each of your images. That has CSS to float the images to the left, which is why they aren’t stacking.
Remove that from your Markdown and they’ll stack like in example A.
Something about the first picture.
Something about the second picture.
Rereading your question, you can use .align-left on the images, but on the second image you’ll need to clear: left so that stacks.
Missed the part where you want the text to float to the right. Floats are a complicated thing to get correct, when in doubt fire up your browser’s web developer tools and start inspecting elements to see what’s going on.
Thanks for the reply! And LOL, while the developer tools probably would have told me what was going on, I wouldn’t know what to do about it! 
How do I add clear: left? I’m not quite sure of the syntax, and this is something that’s not easy to Google. 
Thanks!
You’re halfway there. In addition to Kramdown’s span inline attribute feature, you need to use a block inline attribute as well.
For example you have {: .align-left} applying the class align-left to the image. This floats it to the left.
You also need to add clear: left to the entire block so it “clears the float” and doesn’t collapse.
If there is a class that clears left you could assign that just like the align. But if not you can also add it inline like this via the style attribute {:style="your CSS declaration"}.
TL/DR:
{: .align-left}
Something about the first picture.
{:style="clear: left"}
{: .align-left}
Something about the second picture.
{:style="clear: left"}
1 Like
Thank you SO much. Your explanation was very clear, and extremely helpful. Between your explanation, and the link to Kramdown’s span inline attribute feature, it all makes sense now. I had read that before, but it just didn’t click until now.
Just as an aside, I’ve spent a lot of time on some other forums helping people just like you helped me here. I hope you haven’t lost sight of how much your help means to people in my situation. I think I had lost sight of it, to one degree or another, until I found myself in this situation.
It may seem insignificant sometimes, at least is was starting to for me. But trust me, it’s not insignificant to those we help. Thanks, and cary on the good fight! You are appreciated, no matter how much it might feel at times. 
2 Likes
