7
  • Resolvido, olhar minha resposta *

Fiz essa pergunta nas gringas, mas acho que não consegui me expressar bem por lá.

Pergunta lá: https://stackoverflow.com/questions/25481613/side-menu-align

Eu tenho meu header e abaixo tenho o conteúdo. O conteúdo é composto basicamente por duas divs, umas é o conteúdo em si e outra uma espécie de menu que ocupa todo o resto.

É um layout responsivo, quando a resolução em x <= 640 o menu some.

O problema é quando é > 1366px. O tamanho entre o conteúdo e o menu tem o máximo de 1166px.

Minha gambiarra postei na questão acima mas vou reproduzi-la aqui.

<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 do conteúdo e do 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 do header:

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

Resultados:

1366x768 at 1366x768

Maior que 1366x768 Wow! Align problem!

0

1 Resposta 1

2

Achei a melhor solução usando CSS3. Fiz alguns cálculos de cabeça e acabei descobrindo a função calc() (pode ser 'hackeado' de algumas outras formas usando width relativa e margin absoluta).

O passo inicial é dividir o layout no meio. No meu caso, o layout poderia assumir o valor máximo de 1166px. 1166/2 = 583.

Então, meu código ficou assim:

#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*/
}

Parece ter ficado algo complexo, mas é simples. Obrigado a quem ajudou e espero ajudar quem esteja procurando por isso (apesar que é quase impossível achar justamente especificamente isso). xD

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .