Como posicionar o elemento div logo abaixo e alinhado à esquerda para outro div

Question

Minha configuração é esta - estou trabalhando em um ASP.NET MVC 4.Para a interface do usuário e especificamente para esta questão, estou fazendo isso para o _Layout portanto, é uma configuração muito básica que será compartilhada para todas as páginas.Estou usando onde posso bootstrap 3 mas o site é direcionado apenas a dispositivos de exibição grandes, portanto, muitas coisas serão feitas com outras ferramentas.

No entanto, para o layout básico que estou usando bootstrap 3 elementos estilizados, mas eles já são personalizados, então acho que essa é uma questão mais geral relacionada a CSS/JS do que abordar uma estrutura/lib específica.Basta colocá-lo aqui para que eu possa obter a melhor solução para o meu problema, que é esta:

As cores diferentes são apenas para facilitar a compreensão e como não tenho muita experiência será mais fácil explicar o que quero realizar.eu tenho um <div id="top-nav-wrapper"> cujo objetivo é apenas conter as outras 3 divs e fornecer a imagem de fundo, pois o layout é centralizado e fixo 970px então, em resoluções maiores, recebo essa faixa nas duas extremidades.O estilo desta div wrapper é bem simples:

#top-nav-wrapper {
    background-image:url('/Content/images/navbar-stripe.png');
    background-repeat:repeat-x;
}

Dentro de #top-nav-wrapper div eu tenho três outras tags div.O primeiro é aquele com fundo azul escuro - <div class="container">.Aqui eu uso bootstrap 3 aula .container mas é personalizado e seu estilo é:

.container {
  max-width: none !important;
  width: 970px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

Depois dessa div segue a outra com os botões de navegação e o fundo amarelo escuro -

<div class="container" style="height: 80px; padding-right: 0px
!important; padding-left: 0px !important;">

novamente usando o .container class com algum estilo adicional que você pode ver.

A última div é a linha cinza - <div class="container" style="background-color: grey; height: 50px;"> e novamente eu uso o predefinido .container aula com poucas alterações.

A caixa com borda vermelha da imagem representa o que desejo adicionar agora.Preciso de um menu vertical, mas o design exige que esse menu vertical esteja logo abaixo do div amarelo escuro.Como você pode ver o Home o link do menu é colorido em azul.O lado esquerdo também é a extremidade esquerda do div, então o que eu preciso é esquecer como a janela é redimensionada para ter o menu vertical sempre logo abaixo do div amarelo, alinhado ao canto inferior esquerdo.Para deixar mais claro vou postar uma imagem de como deve ser:

então a primeira coisa que quero e não sei como fazer é posicionar o div de forma que fique abaixo do menu div e alinhado à esquerda com ele.A segunda é que preciso que o menu seja mostrado sobre o div cinza, assim como mostrado na imagem acima.Só para completar - a ideia é que o menu vertical tenha sempre a largura do Home link do cardápio.Mas acho que consegui isso com um pouco jQuery então minha pergunta é inteiramente sobre como posicionar o div da maneira que eu quero?

Answer 1

Se bem entendi, os contêineres de 970px começam na borda esquerda do link Home azul claro e continuam "fora da tela" à direita.Por favor me corrija se eu estiver errado.

Nesse caso, eu configuraria um único contêiner de 970px de largura com margens automáticas para centralizá-lo e, em seguida, colocaria os outros contêineres dentro dele.Se a caixa vermelha estiver dentro do contêiner de 970px de largura, como você conhece a altura da caixa cinza, também poderá estilizar a caixa vermelha margin-top: -50px

Aqui está um código, e você pode vê-lo neste JSFiddle.

HTML:

<div id="top-nav-wrapper">
    <div class="container">
        <div style="height: 50px; background: #006"></div>
        <div style="height: 80px; padding-right: 0px
!important; padding-left: 0px !important; background: #eb0;"></div>
        <div style="background-color: grey; height: 50px;"></div>
    </div>
</div>
<div id="main-wrapper">
    <div class="container">
        <div style="background: red; width: 200px; height: 400px; margin-top: -50px"></div>
    </div>
</div>

CSS:

#top-nav-wrapper {
    background-image:url('/Content/images/navbar-stripe.png');
    background-repeat:repeat-x;
    width: 100%;
}

.container {
  max-width: none !important;
  width: 970px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container div {
    width: 100%;
}