Come posizionate gli elementi CSS direttamente l'uno sotto l'altro?

So che probabilmente c'è una domanda risolta come questa, ma ho cercato e non ho potuto trovare una soluzione.Come posizionate gli elementi CSS direttamente l'uno sotto l'altro?

Quindi, guarda. Ho le basi per un sito web. Un'intestazione, contenuti in primo piano, contenuto principale e piè di pagina. Voglio che il contenuto principale rientri nei contenuti in primo piano, ma ora è dietro a questo. Come posso farlo andare proprio sotto di esso?

HTML:

<html> 
<head> 
    <link href="style.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
    <div class="navigation"></div> 
    <div class="content-featured"></div> 
</body>

CSS:

html, body { 
margin: 0; 
padding: 0; 
} 

.navigation { 
float: left; 
padding: 15px 0; 
min-width: 100%; 
opacity: .48; /* layer alpha */ 
background-color: #1f1f1f; /* layer fill content */ 
height: 20px; 
} 

.content-featured { 
height: 384px; 
background-image: -moz-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ 
background-image: -o-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ 
background-image: -webkit-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ 
background-image: linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ 
} 

.content-main { 
height: 308px; 
}

fonte

2013-07-26 Criesval

Si prega di inviare ciò che avete finora ... – Dror

Si può fornire il codice qui? La risposta potrebbe essere quella di cancellare entrambi, correggere il float ecc. Ecc. Per vedere il tuo codice devi essere più specifico (HTML e CSS) – Thanos

Ci scusiamo per il codice. Post aggiornato. – Criesval

Creare un div contenitore. Questo contiene tutto ciò che vuoi, sia che tu lo impili verticalmente o orizzontalmente. Così più o meno sarebbe simile a questa:

<div id="container"> 
    <div class="header"> 
    </div> 

    <div class="navigation"> 
    </div> 

    <div class="left-sidebar"> 
    </div> 

    <div class="content"> 
    </div> 
</div>

E il vostro CSS sarebbe

#container { 
width:960px; 
} 
.header, .navigation { 
width: 100%; 
float:left; 
height: 80px; 
} 
.sidebar { 
width: 200px; 
float:left; 
min-height: 500px; 
} 
.content { 
width: 760px; 
float: left; 
min-height: 500px; 
}

fonte

2013-07-26 02:08:50

Funziona perfettamente! Ma, invece di creare un nuovo contenitore, ho appena aggiunto il CSS al contenitore del corpo. Avrò problemi in futuro? – Criesval

No, funziona anche in questo caso, ma in genere è più specifico, perché avendo i livelli di quindi , un vero fornitore di container offre maggiore flessibilità !! :) –

Perché hai spostato gli elementi 'width: 100%'? @IntactDev, è piuttosto normale avere un "contenitore" esplicito da manipolare all'interno del corpo. – Trojan

Come posizionate gli elementi CSS direttamente l'uno sotto l'altro?

risposta

Problemi correlati