width 100% con padding !

[SimoVinci]

Ciao a tutti.

Fino ad oggi ho avuto a che fare con siti con dimensioni fisse.

Per la prima volta mi trovo a sviluppare un sito adattabile allo schermo. Mi sono già arenato di fronte a questo problema:

Come faccio a dire che un <div> deve essere largo 100% ed avere un padding di 30px?? Se imposto la proprietà

[CODE]
#mioDiv {
width:100%;
padding:30px;
}
[CODE]

il padding viene giustamente aggiunto al valore e mi viene fuori lo scroll orizzontale perché la larghezza supera il 100%!

[sezenec]

io in questi casi uso le proprietà max-width

#mioDiv {
max-width:100%;
padding:30px;
}

[SimoVinci]

Sì, ma max-width non impone che il div si allarghi per tutto lo schermo!

E non sempre i contenuti lo fanno allargare!

[sezenec]

hai ragione, sorry.
avevo provato con ff e me lo faceva vedere 100%.

ho controllato un sito che ho fatto così e avevo messo width:100% al div che ho usato come contenitore, e il padding l'ho dato alle colonne del menu e del contenuto.

una cosa così:


<div id="mioDiv">
<div id="mioDiv2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="mioDiv3">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

<style>
#mioDiv {
background:#f00;
width:100%;
overflow:auto;
}
#mioDiv2 {
float:left;
background:#0f0;
width:200;
padding:30px;
}
#mioDiv3 {
background:#00f;
padding:30px;
margin-left:260px;
}
</style>


se ti serve, io ogni tanto parto da qui per la struttura di base e per vedere altri approcci. poi personalizzo
http://blog.html.it/layoutgala/indexIta.html

[SimoVinci]

OTTIMA SOLUZIONE

Se il contenitore esterno è al 100% quello interno può anche non avere una width definita, ma può avere il padding! Perfetto!

Grazie anche dell'ottimo link, ne farò tesoro.

[fcaldera]

anche senza ricorrere ad un doppio contenitore, se hai un div che deve essere largo il 100% e non è floattato o posizionato in absolute, puoi omettere la larghezza, lasciando solo il padding

[SimoVinci]

Scusa, ma se ometto la larghezza e magari in questo div c'è una sola parola...

#mioDiv {
  padding:30px;
}
.
.
.

<div id="mioDiv">Ciao</div>

...non mi si espande a tutto schermo, mi fa un rettangolino intorno al "Ciao"!

[emnlmn]

In via teorica un blocco dovrebbe occupare tutto lo spazio orizzontale dell'elemento genitore.
Probabilmente ci sarà qualche proprietà che và a influire su questo comportamento... prova a postare un link alla pagina, così vediamo rapidamente di trovare una soluzione funzionante.