I am working on a design that should like this:
But I have bit of a problem to have the content part centered (horzontal. I have been looking into the following demo from Paul O’B, which I used before:
http://www.pmob.co.uk/temp/sticky-footer5-display-table-middle.htm
Where indeed the middle section is centred, but that is because the both side bars have the same width. What would be the best way to accomplish what I need and still keep it responsive?
Thank you in advance
The simplest way would be to give both sidebars the same width. In fact there is no other way if you want the center section centred in the viewport.
If you want the center section centred between the two sidebars (which is not the same as centred between the viewport) then that should be straight forward.
You could place the sidebars absolutely and then the middle element would remain centred in the viewport but would of course overlap the sidebars once they got in the way and also removes the sidebars from the flow which is not good.
The only way to avoid the sidebars is to do as I suggest and give a matching width to each sidebar. That solves the problem. There isn’t really any other solution for auto centring because the middle element will be centred in the space it has available and if that space isn’t uniform then the centring is offset between the sidebars.
Hi paul, thanks for the reply
Do you mean that if the left sidebar has a width of 20% and the right sidebar a width of 2% the center content should have a negative left margin of 18%?
I’m afraid that won’t work (unless this is a fixed width layout) because although you will initially get the centering you require once the screen width is reduced the margin-left:-18% will pull the central structure on top of the left sidebar and cover it up.
I simply meant increase the width of the right sidebar to 20% and your problem is solved. You just align the content in that right sidebar to the right and the appearance is the same as before except that the center section will never overlap either column.
I understand now Paul, thanks a lot. It’s as usual much appreciated.
Just one more question. As you can see the right sidebar has a height of 100% and a white background, so how do I get that 100% height background. Position it absolute to the right with height 100% and then cover it with the right sidebar?
