OJS- CSS layout problem

I have a production journal jmss.org that has a 4 divs header-title, leftSidebar, main and rightSidebar.
I am trying to have it so that the leftSidebar,main and rightSidebar all stay under the header-title (image).
So that if the screen size changes the three components all stay together and under the image.
I know this is a css issue but has anyone had this issue and has a solution I would really appreciate it.


I think your options are:

  • Force all widths to be in pixel (including a minimum width). This disrupts the goal of being able to resize the screen arbitrarily.
  • Redo all widths as percentages of the screen. This allows more flexibility in screen widths, but may look odd in very wide or very narrow screens.
  • Use responsive media queries to resize or reflow the page for selected widths. This is the most flexible and the most work.