Working with Vertical Headers
I know they're a bit 'old-hat', but I working on a site that needs a lot of vertical space, and it's probably back in the 90's when I last used a vertical header, so a bit of nostalgia isn't so bad!
I'm trying to make my workflow as normal as possible, so I set my <main> element to have a left margin the same width as the header, hoping that from then on, any elements I add will automatically be shifted right and things like percentages etc will all work. But some things aren't so good, some elements look better aligned centre across the full page including the header, others need to be centred in the page excluding the header.
What advice would you give for a setup like this? Is it a candidate for container queries/units?
5 Replies
It would be best if you could share the code or provide a picture or something that will help us understand the issue and assist you accordingly.
Not sure if this helps
Continuing along the same theme, I've moved further along, but I'm getting a gap between my header and section, but I cannot see any reason for it. Dev Tools the Main seems to have 20px of space next to the header, but that might be because dev tools shows a ruler, but none of the html seems to add this space. See https://dev.the-harrisons.info/test-width
your body has a class of brx-header-left. when thats taken off the gap goes away. i would give such fixed widths to things either. in your body you have the direct children as header + main. either wrap these elements in a section or on the body give it a display: grid; grid-template-columns: min(100%, 200px) 1fr and you then dont have to worry about margins the size of the header element etc
I'll look into it tomorrow, as it's far too late tonight to work on it, but thanks a million.