How to create 2 columns with fixed width and percentage width

Design help General
1

Hi,

i´m trying to build a webapp that is with - 100%, height - 100%.

I can make this with absolute position, but i´m not a big fan of absolute position, and i´m having difficulty doing this with position relative/auto.

Can i make this with relative position or i have to use absolute position?

Tks

2

You can do this using the “columns” feature. For the head area use a block at 100%. For the body and side, use a “column” block with two columns at a 9:3 ratio. :slight_smile:

3

For the content and sidebar, another way to do it is to use blocks instead of columns and float both blocks left and give each a percentage width.

Also, are you wanting to have a color of those blocks span to the very bottom of the page (is that what you mean by 100% height)?

4

@Jonas76 - The head is not a problem, a simple block with 100%.
The problem is the 2 div´s, the main block (blue) and right side bar (green).

The 2 div´s have one thing in common, 100% height, but the side bar has 200px fixed size, so i cannot use columns, because rows cannot have the size determined by the webflow responsive…

@thesergie - The big problem here, is that i have one div (green) with 200px fixed size, and other one with 100% with size. I cannot float 2 div´s with this property.

5

Set it’s height using jQuery (before </body>) like this:

$('.blue-box').css('height', $(window).height() - $('.red-box').height());
$('.green-box').css('height', $(window).height() - $('.red-box').height());

make it a function and call it from both $(document).ready(function() { ... }); and $(window).resize(function() { ... });

Set green one width by doing:

$('.blue-box').css('width', $(window).width() - $('.green-box').width());
6

@Rui_Almeida it’s true sadly you can’t use pure CSS to set one to be pixels and one to be percent and have them work together. I wish they had something like that. I think you can make it work this way - put the sidebar INSIDE of the 100% width block and float it to the right (and set it’s width to 200px). If you set the sidebar to 100% height, content inside the 100% block should not peak beneath the sidebar (if the sidebar has less content).

You can try @bartekkustra’s method above or

Let us know which one works best for you.

Btw, I changed your title so it’s more pertinent to the topic. :slight_smile:

7

The main problem in CSS, is that the 100% value relates to the parent element (in this case the body), not ‘100% of the space that is left’.

You can try to use the calc CSS method (not supported in the Webflow UI, but can be set in the head code):

.header { height: 85px; }

.sidebar { height: calc(100%-85px); width: 200px; }

.main { height: calc(100%-85px); width: calc(100%-200px);

Note that this method requires prefixes for some browsers and will not work in older versions of IE. See support matrix here: calc() as CSS unit value | Can I use... Support tables for HTML5, CSS3, etc