Relative sidebar in responsive layout

7
  • Solved, look at my answer *

I asked this question in the gringas, but I do not think I could express myself well there.

Question there: link

I have my header and below I have the content. The content is basically composed of two divs, one is the content itself and another is a kind of menu that occupies everything else.

It is a responsive layout, when the resolution at x

asked by anonymous 27.08.2014 / 02:51

1 answer

2

I found the best solution using CSS3. I did some headaches and ended up discovering the calc () function (it can be 'hacked' in some other ways using relative width and absolute margin).

The initial step is to split the layout in between. In my case, the layout could assume the maximum value of 1166px. 1166/2 = 583.

So, my code looks like this:

#content-wrapper{
    width: calc(50% + 583 - 366);
    /*366 é a largura máxima do menu*/
}

#content-menu{
    width: calc(50% + 583 - 800);
    /*800 é a largura máxima do conteúdo*/
}

It seems to have been somewhat complex, but it's simple. Thanks to those who helped and I hope to help anyone looking for it (although it is almost impossible to find this specifically). xD

    
27.08.2014 / 21:47