Comment positionner l'élément div juste en dessous et aligné à gauche sur un autre div

Question

Ma configuration est la suivante : je travaille sur un ASP.NET MVC 4.Pour l'interface utilisateur et spécifiquement pour cette question, je le fais pour le _Layout il s'agit donc d'une configuration très basique qui sera partagée pour toutes les pages.J'utilise là où je peux bootstrap 3 mais le site ne cible que les grands appareils d'affichage donc beaucoup de choses seront faites avec d'autres outils.

Cependant, pour la mise en page de base que j'utilise bootstrap 3 éléments stylisés mais ils sont déjà personnalisés, donc je pense qu'il s'agit d'une question plus générale liée au CSS/JS que d'aborder un framework/lib spécifique.Mettez-le simplement ici pour que je puisse obtenir la meilleure solution à mon problème, qui est la suivante :

Les différentes couleurs sont juste pour faciliter la compréhension et comme je n'ai pas beaucoup d'expérience, il me sera plus facile d'expliquer ce que je veux accomplir.j'ai un <div id="top-nav-wrapper"> dont le but est uniquement de contenir les 3 autres divs et de fournir l'image de fond, car la mise en page est centrée et fixée sur 970px donc sur des résolutions plus grandes, j'obtiens cette bande aux deux extrémités.Le style de ce div wrapper est assez simple :

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

À l'intérieur de #top-nav-wrapper div J'ai trois autres balises div.Le premier est celui avec le fond bleu foncé - <div class="container">.Ici j'utilise bootstrap 3 classe .container mais c'est personnalisé et son style est :

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

Après ce div suit l'autre avec les boutons de navigation et le fond jaune foncé -

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

encore une fois en utilisant le .container classe avec un style supplémentaire que vous pouvez voir.

Le dernier div est la ligne grise - <div class="container" style="background-color: grey; height: 50px;"> et encore une fois j'utilise le prédéfini .container classe avec peu de changements.

La case bordée de rouge de l'image représente ce que je souhaite ajouter maintenant.J'ai besoin d'un menu vertical mais la conception nécessite que ce menu vertical se trouve juste sous le div jaune foncé.Comme vous pouvez le voir le Home le lien du menu est coloré en bleu.Le côté gauche est également l'extrémité gauche du div, donc ce dont j'ai besoin, c'est peu importe la façon dont la fenêtre est redimensionnée pour que le menu vertical soit toujours juste en dessous du div jaune, aligné en bas à gauche.Pour que ce soit plus clair, je posterai une image de ce à quoi cela devrait ressembler :

donc la première chose que je veux et je ne sais pas comment faire est de positionner le div pour qu'il soit sous le menu div et aligné à gauche avec lui.La seconde est que j'ai besoin que le menu soit affiché sur le div gris, un peu comme il est montré dans l'image ci-dessus.Juste pour que ce soit complet, l'idée est que le menu vertical ait toujours la largeur du Home lien de menu.Mais je pense que j'ai eu ça avec un peu jQuery donc ma question porte entièrement sur la façon de positionner le div comme je le souhaite ?

Answer 1

Si je comprends bien, les conteneurs 970px commencent à la bordure gauche du lien Accueil bleu clair et continuent "hors écran" vers la droite.Corrigez-moi si j'ai tort, s'il-vous plait.

Dans ce cas, je configurerais un seul conteneur de 970 pixels de large avec des marges automatiques pour le centrer, puis je placerais les autres conteneurs à l'intérieur.Si la zone rouge se trouve à l'intérieur du conteneur de 970 px de large, puisque vous connaissez la hauteur de la zone grise, vous pouvez également simplement styliser la zone rouge. margin-top: -50px

Voici du code, et vous pouvez le voir ici 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%;
}