Here is the issue on Stackoverflow:
The suggested answer works in the code sample, but not on the live site, as described in the comments.
Any insights much appreciated.
Hi and welcome to Sitepoint, @mobilhome ! 
To me, it seems unclear what is working and not working from your question.
space-between is a value that would evenly space the elements throughout its container, and while you are calling this a column, there is only one column, and no elements sit laterally next to it. So, I’m unclear on what is working in your codepen from the suggested solution at StackOverflow since I only see vertically stacked elements, i.e.:
Also, it appears that you are designing a navigation menu, and the markup structure seems unnecessarily complex since this is implemented through your WordPress site. It needs to be simplified to 1-2 layers of nested divs instead of the 6 levels. It’s really hard to follow. You’re also misusing the <article> tag since the navigation menu is not a blog post, etc. whereas you should be using a <div> to serve its semantical purpose - a container.
Where there are any floats that create actual columns while I can find color assignments to columns? To be honest, it’s a bloated mess that if simplified first, things will start making more sense.
Can you design a graphic that shows us what the goal is?
Have you put the code in the validator to check for errors?
I also think you can forego the image files since all it is is text with shadow around it.
…but I’ll leave it to the experts here since I don’t understand the issue and what is / is not working, and I’m also not a leftist. This is basically a WordPress question.
The OP has set a height of 7786px and I guess they want the boxes spread out evenly throughout that column height.
However as the boxes are all absolutely placed flex alignment will not work on the flex items.
The code is nonsense really (apologies) because no real page should be constructed like that with fixed heights and multiple absolute positions.
The demo can be fixed width this code:
#DIV_1 > * {position:static!important;}
However the fixed height on the wrapper is still nonsense.
I don’'t really see how this relates to the actual site anyway and would need more information on what needs to be achieved regarding the real site. I am not keen on popping over to SO either so please discuss the details in this thread if you want help here 
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.