Relative sidebar in responsive layout

Question

• Solved, look at my answer *

I asked this question in the gringas, but I don’t think I could express myself well there.

Ask there: https://stackoverflow.com/questions/25481613/side-menu-align

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

It is a responsive layout, when the resolution in x <= 640 the menu disappears.

The problem is when it is > 1366px. The size between the contents and the menu has a maximum of 1166px.

My gambiarra I posted in the question above but I will reproduce it here.

<div id="content">
        <div id="content-wrapper">
            <div class="wrapper">
                CONTENT HERE
            </div>
        </div>
        <div id="content-menu">
            <div class="wrapper">
                MENU HERE
            </div>
        </div>
</div>

CSS of content and menu:

#content-wrapper{
    float: left;
    width: 65.88579%;

}

#content-wrapper .wrapper{
    float: right;
    width: 88.88889%;
    max-width:800px;
}

#content-menu{
    float:right;
    width: 34.11420%;
}

#content-menu .wrapper{
    float: left;
    width: 78.54077%;
    max-width:366px;
    height: auto;
}

Wrapper of the header:

.wrapper {
    width: 85.35871%;
    max-width: 1166px;
    height:100%;
    display: inline-block;
    position: relative;
}

Results:

1366x768

Greater than 1366x768

Answer 1

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

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

So my code went 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 become somewhat complex, but it’s simple. Thanks to those who helped and hope to help those who are looking for it (although it is almost impossible to find just this). xD