In the index page of this site, In the second “Hero Section” element (class = health), I am trying to set the sidebars to position relative in the top left and right corners. For some reason the right side bar doesn’t want to postion properly and I had to move it manually 300 PX down.
Also the parent element (Hero Section) is using flexbox for positioning and I want the main container child element to always be centered vertically and horizontally regardless of the width of the sidebars. Right now, If I increase or decrease the width of the left side bar for example, the main container will move instead fo staying the middle like I want.
I’m open to other positioning suggestions.
See diagram below of how I want it to be:
I’ve now changed it from flexbox to a float left and right for the side bars setup.
It seems to work better that way, but for some reason the main container keeps going way down the page much more than it should…
Wow. Thanks.
That solves one problem.
Have a look at the site now that I fixed it.
I put everything into sections. What I want is that in each section there will be a main container that is also centered vertically. That way there will be equal spacing between sections. See now how it is weird with the spacing?
Thansk again. Especially for the video
BS"D
Ok, but I want each section to be the maximum screen height, and the content (the main container) to be centered horizontally and vertically in it.
Do you know how to do that?
Thanks again…
Each section is/can already be longer than the maximum screen height, by making the section restricted to the screen height, what do you plan to achieve? Scrollbars betweeen each section?