# Aligning Paragraphs With Images
**URL:** https://forum.code.org/t/aligning-paragraphs-with-images/37289
**Category:** CS Discoveries
**Tags:** html, csd-unit-2
**Created:** [November 30, 2022, 3:20pm UTC](https://forum.code.org/t/aligning-paragraphs-with-images/37289 "2022-11-30T15:20:58Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@jwilson25](https://forum.code.org/u/jwilson25)
#### Post date: [November 30, 2022, 3:20pm UTC](https://forum.code.org/t/aligning-paragraphs-with-images/37289/1 "2022-11-30T15:20:59Z")
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
---
### Author:  [@mwood](https://forum.code.org/u/mwood)
#### Post date: [November 30, 2022, 3:58pm UTC](https://forum.code.org/t/aligning-paragraphs-with-images/37289/2 "2022-11-30T15:58:46Z")
@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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) or [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) is a better solution, but perhaps a little more tricky to execute.
[My example](https://codeprojects.org/projects/weblab/hqfOonyBnVaHqxNAS2Y7uudiT-Ndks7VwoFJOfc7DhA)
Mike
---
### Author:  [@jwilson25](https://forum.code.org/u/jwilson25)
#### Post date: [November 30, 2022, 8:47pm UTC](https://forum.code.org/t/aligning-paragraphs-with-images/37289/3 "2022-11-30T20:47:12Z")
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.
---
### Author:  [@ksoucy](https://forum.code.org/u/ksoucy)
#### Post date: [December 2, 2022, 1:00pm UTC](https://forum.code.org/t/aligning-paragraphs-with-images/37289/4 "2022-12-02T13:00:52Z")
I took this opportunity to introduce the DIV element to my students and showed them how to resolve the cascading image issue using the `` 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](https://codeprojects.org/projects/weblab/l012ftfCKXEYZhpxqUeKd8XbyaH5TFnIyOMEpVU8OBM)
---
### Author:  [@jwilson25](https://forum.code.org/u/jwilson25)
#### Post date: [January 4, 2023, 4:10pm UTC](https://forum.code.org/t/aligning-paragraphs-with-images/37289/5 "2023-01-04T16:10:57Z")
@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.
---
### Author:  [@ksoucy](https://forum.code.org/u/ksoucy)
#### Post date: [January 4, 2023, 7:17pm UTC](https://forum.code.org/t/aligning-paragraphs-with-images/37289/6 "2023-01-04T19:17:08Z")
I think I deleted the previous link during cleanup. Try this link: [Lesson11-Lvl2 Using the “div” tag](https://codeprojects.org/projects/weblab/rSxT7P2SHM37hER1d8HKjuPsbLpkcyoT2ljnJNXL9iI)
Then, in your CSS file have the “divs” clear left floated elements (the images):
div {
clear: left;
}
---
### Author:  [@jwilson25](https://forum.code.org/u/jwilson25)
#### Post date: [January 4, 2023, 10:57pm UTC](https://forum.code.org/t/aligning-paragraphs-with-images/37289/7 "2023-01-04T22:57:10Z")
Thanks, @ksoucy!
This looks very good. And not too complicated.
---
### Author:  [@jwilson25](https://forum.code.org/u/jwilson25)
#### Post date: [January 4, 2023, 11:18pm UTC](https://forum.code.org/t/aligning-paragraphs-with-images/37289/8 "2023-01-04T23:18:52Z")
Here’s a [REMIX of @ksoucy’s example](https://codeprojects.org/projects/weblab/ibZo-MXQqqe6VD6P_wGtfg) I did that shows how to alternate the images from left to right and still keep the text descriptions aligned with the images.
---
### Author:  [@ksoucy](https://forum.code.org/u/ksoucy)
#### Post date: [October 13, 2023, 11:56am UTC](https://forum.code.org/t/aligning-paragraphs-with-images/37289/9 "2023-10-13T11:56:42Z")
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](https://codeprojects.org/projects/weblab/8_GYsyQHx1q6RIzknXKuQIGwGhnNVXlqCbkWvXWS6PI)