Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I am trying to implement the following screen layout using a CSS grid framework (BluePrint), but unsuccessfully:
How can achieve this with a grid framework? Does anyone have a CSS/HTML code example to share? Thanks.
P.S.: The reason I want to use a framework is to make sure this layout works in all browsers (any safe framework is ok, it does not have to be BluePrint).
After digging deep into this issue, I got to understand that it is impossible to solve it with a grid framework. The problem is that a couple of heights and widths are derivative of each other. Moreover, depending on the content of the ‘central’ cell, slide bars may appear too.
I found a long solution involving some Javascript. I first define the different cells of my screen with divs in my HTML. Then, I retrieve the document width and height and set cells’ widths and heights using JQuery. I start with fix values, then simple derivatives, then complex derivatives.
For the slide bar issue, I used the trick explained here. I adjust the size of the central column according to the presence of a slide bar, which itself is depending on the height of the ‘central’ cell, which itself depends on the width of the screen.