Student wants text to appear to right of the image above the text.
We tried using flota in the CSS for the image and the text but…
https://codeprojects.org/projects/weblab/bj_u12bDpQPzi1kRdSwRPvPzcKGKZ0sWynO175Ayov4
For some reason, it wouldn’t let me see the code. Sometimes students think they should apply the float to the text since that’s what they want to move, but if you use the float:left; on the image, it should put the image to the left and the text to the right. Give it a shot and let us know!
Hello again, @GordonBrune ,
Let me take a stab at this one … Code.org recently posted in the forum that they are looking into possibly revising the curriculum for unit 2. I applied and I don’t know for sure what they are looking for or what changes they are looking to make, but if I had my say, I’d advocate for removing float from the lessons as it is a pretty clunky way to layout elements on a page. I searched for how to use float just to see what I would find and most of the articles are over 5 years old… that’s because there are better ways to accomplish the task.
So, here are two answers.
1, your student floated the image left and the text right. Floating both lifts both off the page and kind of doesn’t work. You only need to float the image. This remix shows the “float: right” removed and the text does go to the right of the image.
However, the next question is going to be, “but yeah, it still doesn’t look great” and I fully agree with that, because the text isn’t very long, so after the text finishes, the rest of the page flows below and it’s just not very well laid out so here is what I show my students. As is mentioned in the article above, there are better ways. For a simple example like this one, flexbox is the easiest.
The basics are that you create a container around your image and your text. I like using the <figure> tags, but you can also use a <div>.
The styling is where the magic happens.
Now, you get these results instead.
I did change the text to white so it was easier to see and I added a 2nd paragraph.
So, it is a few more lines of code, but it is a lot more clean visually after it is done and you don’t even have to float anything (I took the float out of the code on the 2nd one). You could also alternate left and right by just changing the order of the code inside the figure tags. If the paragraph is first, it will be on the left and the image on the right. You can also add three images inside one container and the three will take up equal space across the page … and there’s even more you can do.
So, I hope this isn’t overly complicated, and I could probably present it more clearly, but let me know if this may help.
Mike
1 Like
This would be an awesome addition to the unit!!
Perhaps a stand alone lesson?
1 Like