My wife’s friends, “The chef and her marine biologist daughter”, arrived this morning and my wife picked them up at the airport. My leg is still not cooperating so I’m not sure if I am going to be able to get down from the Barn Suite today to see them. Oh well, there is always Facetime.
My wife took them to Mount Washington this afternoon. Katie and Bobby stayed home and played Genshin Impact. They went to Alpine Lodge for food after the hike and were beat when they finally got home!
We learned that Bobby will be in Mrs. Cameron’s Grade 6 class at Huband this year. Esca and Raheem will be in the same class, but no Isaac. Bobby says that she is the best teacher in the whole school! Maybe when she learned what a great pupil Bobby is she requested him personally… 🙂
A substantial part of the evening then became a project with my daughter. She is building the CVEMUN website for her Model United Nations conference, and we got deeply involved in the About Us page (see photo to the right).
She had created a very attractive alternating design over a mountain background. One row had a large white text panel on the left and a photograph of the United Nations flag on the right. The next row reversed them, with the flag on the left and the text on the right. She liked the basic concept, but the columns weren’t lining up properly.
We started digging into the WordPress HTML.
What initially looked like a simple visual alignment problem turned into a surprisingly interesting little exercise in CSS and WordPress columns. The rows were divided into 77-percent text columns and 23-percent image columns, while the photographs themselves had fixed pixel widths. Consequently, the photograph wasn’t actually occupying the entire 23-percent column. Invisible unused space was sitting beside it.
We experimented with making the photographs fill their columns, but that made them too large and began cutting off part of the flagpole. That wasn’t what she wanted. She liked the photographs smaller, with the entire original picture—including the flagpole—visible.
We finally got very close to exactly the appearance she wanted: smaller UN flag photographs with rounded corners, nothing cropped away, and large clean text panels alternating from side to side. Then she spotted one last detail. There were little invisible strips of unused space—one to the right of the upper photograph and another to the left of the lower photograph—which meant the inner edges still didn’t line up perfectly.
That finally revealed the real solution. Instead of defining the layout as 77-percent text and 23-percent image, we could make each image column exactly the width of the photograph—245 pixels—and let the corresponding text column consume all the remaining space. In CSS terms, the image column becomes flex: 0 0 245px, while the text column becomes flex: 1 1 auto.
It was one of those satisfying little programming moments where the problem suddenly makes sense. We weren’t really trying to move the photographs at all. We were trying to eliminate space that shouldn’t have been there in the first place.