CSS Div percentuale di larghezza e imbottitura senza rompere il layout

Question

Ci può essere una semplice correzione per questo, ma mi ha turbato da secoli ormai ...

Mi spiego la situazione. Ho un div con il 'contenitore' ID che contiene tutti i contenuti della pagina (inclusi anche intestazione e piè di pagina) che manterrà tutto in linea e posso fare solo 1 semplice margine: 0 auto; ' invece di multipli. Quindi diciamo che ho la larghezza di #container impostata su 80%. Ora se metto un altro div all'interno della stessa larghezza (80%) e gli diamo l'ID di 'header' con 10px di padding tutto intorno, il layout si "spezzerebbe" (per così dire) perché la pagina aggiunge l'ammontare di padding la larghezza. Quindi, come posso farlo rimanere in-bound senza usare metodi come una percentuale più bassa per il #header div? Fondamentalmente, voglio renderlo fluido.

Ecco qualche esempio di codice per dare un'idea di che cosa sto parlando ...

CSS

#container { 
    position:relative; 
    width:80%; 
    height:auto; 
} 
#header { 
    position:relative; 
    width:80%; 
    height:50px; 
    padding:10px; 
} 

HTML

<div id="container"> 
    <div id="header">Header contents</div> 
</div> 

Chiunque può aiutare me fuori con questo problema che mi ha infastidito per sempre?

Answer 1

Se si desidera che il #header di essere la stessa larghezza vostro contenitore, con 10px di imbottitura, si può tralasciare la sua dichiarazione di larghezza. Ciò causerà implicitamente la larghezza dell'intero genitore (dato che un div è di default un elemento a livello di blocco).

Poi, dal momento che non è stata definita una larghezza su di esso, il 10px di imbottitura verrà correttamente applicata all'interno dell'elemento, piuttosto che aggiungere alla sua larghezza:

#container { 
    position: relative; 
    width: 80%; 
} 

#header { 
    position: relative; 
    height: 50px; 
    padding: 10px; 
} 

Lo si può vedere in action here.

La chiave quando si utilizzano larghezze percentuali e margini/margini di pixel non deve definirli sullo stesso elemento (se si desidera controllare con precisione la dimensione). Applicare la larghezza percentuale al genitore e quindi il pixel padding/margin a un bambino display: block senza larghezza impostata.

---

Aggiornamento

Un'altra opzione per affrontare questo è quello di utilizzare la regola box-sizing CSS:

#container { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 

    /* Since this element now uses border-box sizing, the 10px of horizontal 
     padding will be drawn inside the 80% width */ 
    width: 80%; 
    padding: 0 10px; 
} 

Ecco un post a parlare di come box-sizing works.

Answer 2

provare a rimuovere la position da header e aggiungere overflow-container:

#container { 
    position:relative; 
    width:80%; 
    height:auto; 
    overflow:auto; 
} 
#header { 
    width:80%; 
    height:50px; 
    padding:10px; 
}