Link to the project or level: [replace with link to the curriculum or get the “Share” link to a project] What I expect to happen: [replace with a detailed description of the behavior you’re trying to create] What actually happens: [replace with a detailed description of what actually happens when the code runs including any errors or unexpected behavior] What I’ve tried: [replace with a detailed description of what you’ve already tried to do to solve the problem]
What you are describing, if I understand correctly, is really a 3 column layout. These layouts are beyond the CSD scope but not too difficult to implement.
This tutorial is a simple 3 column layout and when you add it to your student’s page it looks like this. I did remove the extra paragraph tags since the purpose of a layout is that the text wraps within its container or column.
There are other layouts in the tutorial section on this page of W3Schools. You do have to scroll way down on the left hand navigation column to the “GRID” section.
Thanks! I like this idea, but not sure that’s what he wants to do. He wants the copy to be split on the left and right of the picture, similar to the attached JPEG.
This isn’t particularly an easy thing to do, but it is possible. I did find an article on how it could be achieved and it is similar to what @melynn suggested using columns, along with a little css magic. It may not be easy for a beginning student to accomplish, but if your student is motivated enough, they may be able to get theirs to work by following the instructions at this site:
So he would like a single block of text to wrap all the way around the image including the bottom. That isn’t possible with “float”. Float is what allows text to wrap around an image and there is no float: center.
Workarounds would mean breaking up the text but an HTML Table might give him the look he wants and would be fairly easy to implement. I quickly mocked up his page in a table here. You could play around with the padding attributes to remove some of the space between the table cells. Here is an HTML Table tutorial.
Other workarounds include using the more responsive tools for page layout. My students have been playing around with these page layout tools. They are a little more responsive for different screen sizes.
