Come posizionare l'elemento div proprio sotto e allineato a sinistra su un altro div

Question

La mia configurazione è questa: sto lavorando su un file ASP.NET MVC 4.Per l'interfaccia utente e in particolare per questa domanda, lo sto facendo per il _Layout quindi è una configurazione molto semplice che verrà condivisa per tutte le pagine.Sto usando dove posso bootstrap 3 ma il sito si rivolge solo a dispositivi di visualizzazione di grandi dimensioni, quindi molte cose verranno fatte con altri strumenti.

Tuttavia per il layout di base che sto utilizzando bootstrap 3 elementi in stile ma sono già personalizzati, quindi penso che questa sia una domanda più generale relativa a CSS/JS che ad affrontare framework/lib specifici.Mettilo qui così posso ottenere la soluzione migliore per il mio problema che è questa:

I diversi colori servono solo per facilitare la comprensione e poiché non ho molta esperienza quindi mi sarà più facile spiegare cosa voglio realizzare.Ho un <div id="top-nav-wrapper"> il cui scopo è solo quello di contenere gli altri 3 div e di fornire l'immagine di sfondo, perché il layout è centrato e fissato su 970px quindi su risoluzioni più grandi ottengo questa striscia su entrambe le estremità.Lo stile di questo div wrapper è piuttosto semplice:

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

Dentro il #top-nav-wrapper div Ho altri tre tag div.Il primo è quello con lo sfondo blu scuro - <div class="container">.Qui uso bootstrap 3 classe .container ma è personalizzato e il suo stile è:

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

Dopo questo div segue l'altro con i pulsanti di navigazione e lo sfondo giallo scuro -

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

nuovamente utilizzando il .container classe con alcuni stili aggiuntivi che puoi vedere.

L'ultimo div è la linea grigia - <div class="container" style="background-color: grey; height: 50px;"> e ancora una volta utilizzo il default .container classe con pochi cambiamenti.

La casella bordata di rosso dell'immagine rappresenta ciò che voglio aggiungere ora.Ho bisogno di un menu verticale ma il design richiede che il menu verticale sia proprio sotto il div giallo scuro.Come puoi vedere il Home il collegamento al menu è colorato in blu.Anche il lato sinistro è l'estremità sinistra del div, quindi ciò di cui ho bisogno è non importa come viene ridimensionata la finestra per avere il menu verticale sempre proprio sotto il div giallo, allineato in basso a sinistra.Per renderlo più chiaro posterò un'immagine di come dovrebbe essere:

quindi la prima cosa che voglio e non so come fare è posizionare il div in modo che sia sotto il menu div e allineato a sinistra con esso.Il secondo è che ho bisogno che il menu venga mostrato sopra il div grigio, proprio come mostrato nell'immagine sopra.Giusto per completarlo, l'idea è che il menu verticale abbia sempre la larghezza del file Home collegamento al menu.Ma penso che ci sono riuscito con un po' jQuery quindi la mia domanda riguarda interamente come posizionare il div nel modo in cui lo voglio?

Answer 1

Se ho capito bene, i contenitori da 970px iniziano dal bordo sinistro del collegamento Home azzurro e continuano "fuori schermo" verso destra.Per favore correggimi se sbaglio.

In tal caso, imposterei un singolo contenitore largo 970 px con margini automatici per centrarlo, quindi inserirei gli altri contenitori all'interno.Se il riquadro rosso si trova all'interno del contenitore largo 970 px, poiché conosci l'altezza del riquadro grigio, potresti anche semplicemente applicare uno stile al riquadro rosso margin-top: -50px

Ecco del codice e puoi vederlo in questo 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%;
}