Hoping someone can help me, still adjusting to getting back into CSS & new to Webflow this past week.
I am currently building a site for a client where their will be a fixed navigation bar on the right hand of the screen on the desktop version and to the right of that there will be a large image, taking up the full (remaining) page width and half of the page height. Under that I would like to place an image that is 33% of the page wide and the remaining 50% high, with another beside that taking up the remaining 66% width and remaining height.
So basically I want those three images to fill the entire viewport on any desktop view and the nav var to take up the entire left hand of any screen. Is there an easy way to do this? I’m setting it up currently and the height percentages seem to be my issue. I don’t want to limit their heights to actual pixels as I want the imagery to always be filling the remaining space.
Is this a matter of using Div’s and assigning them backgrounds? I don’t want to do it wrong so hoping someone is up for helping!
If you’re not worried about supporting ie8, you can use VH (viewer height) and VW (viewer width) units instead of percentages.
If you do use those, a div that is 100VH x 33VW would be the entire height of your screen and 1/3 of it’s width. It’s good practice to also assign a min height and width in px so that it works in more browsers.
If that’s not what you’re looking for, let me know.
I’m not too sure I want to eliminate IE8 users as the client will likely be using that browser themselves. Is there an alternative method you could suggest? The priority is I want three images taking up all the space in the right hand of all desktop resolutions basically.
I’m not sure how much clout you have with your client, but if they are using ie8, you’re in for a world of hurt and will be severely limited in the elements that you will be able to design for them. Interactions, transparency, z-index, dropshadows, custom fonts, all do not behave well or at all in ie8. You should tell them to upgrade.
It’s not a bad idea to keep backwards compatibility in mind, I have to support ie8 in all of my sites, but it’s gawd awful or impossible to get it to behave as you’ll see it in the webflow design tool.
