Aligning Paragraphs With Images

CS Discoveries
,
1

In CSD Unit 2 Lesson 11, students learn the float property that allows text to flow around an image that is aligned left or right. We noticed that if the text that appears next to an image does not extend to the bottom of an image (e.g. if the paragraph is small or if the web preview pane is wide) then the following image will not float all the way to the left because it would overlap the previous image.

Is there a way to specify that a heading or paragraph begin after an image? I thought about setting the paragraph height, but don’t know if that would be the right approach. I’d like to be able to make it so a heading for the next image always fits below the previous image.

Does this make sense?

John

2

@jwilson25,

Floats are tricky and they are almost starting to become obsolete as layout methods have been adopted in the last 4 or 5 years (such as grid layout). This can get a little complex for students who are just starting, though.

Here’s a link to a project where I have included some css that “clears” the floats so the images don’t behave as you suggest. I still had to include some line breaks between paragraphs so the text lines up though, so ultimately, using something like grid or flexbox is a better solution, but perhaps a little more tricky to execute.

My example

Mike

3

Thanks, Mike. As you can see, I am not an HTML expert. I am an experienced C coder, though, so I understand coding. I couldn’t find a reliable way to do what the students want to do using float (especially when changing the width of the page). I am glad to see there are ways to handle what students want to do and will introduce these to students who want to learn them.

2 Likes
4

I took this opportunity to introduce the DIV element to my students and showed them how to resolve the cascading image issue using the <div></div> tags to group content, then using CSS to have the div’s clear floated elements. Here’s an example using Lesson 11, level 2:

Lesson11-Lvl2 with Div

1 Like
5

@ksoucy,

I tried looking at the code you mention, but the link doesn’t take me to any code. I get a blank page in Firefox and a message saying the page doesn’t exist in Chrome.

6

I think I deleted the previous link during cleanup. Try this link: Lesson11-Lvl2 Using the “div” tag

Then, in your CSS file have the “divs” clear left floated elements (the images):
div {
clear: left;
}

7

Thanks, @ksoucy!

This looks very good. And not too complicated.

8

Here’s a REMIX of @ksoucy’s example I did that shows how to alternate the images from left to right and still keep the text descriptions aligned with the images.

9

The link I provided to this example was no longer working. Here’s an updated link: Lesson 11 Level 2 using “div” to prevent cascading images

2 Likes