▼
Streaming live at 10am (PST)

Trouble with SideBar positioning

Design help General
#1

BS"D

Hey Guys

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:

Pasted image796×528 9.41 KB

Regards.
Yoram

Here is my public share link: LINK
(how to access public share link)

#2

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…

#3

Here’s how to use flexbox

#4

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 :slightly_smiling:

#5

Remove the height from all sections.

#6

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…

#7

I don’t see how that can be possible considering your site structure.

#8

BS"D
What do you mean? What structure do I have? And which structure do I need to have in order to achieve the desired result?
Thanks

#9

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?

To do that you can simply add max-height: 100vh

If you need this instead: http://alvarotrigo.com/fullPage/, you need to hire a web developer to implement it for you if you do not have custom coding knowledge.

#10

That alvarotrigo thing looks good.
Thanks for all your help.

#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.