dividere div

**Trommo** · 05-10-2014, 19:58

Salve a tutti, il mio problema è che non riesco a dividere un div in 10 parti, tutte uguali fra di loro, con altri div. Ho provato così, ma le misure sembrano non coincidere.

Vi posto il codice da me usato:
inde.html

codice:

<link href="main.css" rel="stylesheet" type="text/css">
<body>


<div id="container">
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
</div>


</body>

main.css

codice:

 #container{


 	height: 502px;
 	width: 600px;
 	background-color: #dddddd;
 	border: 1px solid black;
 	padding: 0px;
 	margin: 0px;
 }


 #grid{
  width: 100%;
  height: 10%;
  border-bottom: 1px solid black;


 }

Non lo so, sembra che ci sia qualche misura preimpostata di cui io non abbia tenuto conto.. sapete aiutarmi?

**tampertools** · 05-10-2014, 21:33

Gli id devono essere univoci

**Trommo** · 05-10-2014, 22:20

Perche? in che senso? un tantino di spiegazione? :C

**micheleraponi** · 06-10-2014, 16:31

Ciao, il problema delle diverse altezze che riscontri nei div è creato dal non aver tenuto conto dell'ingombro del border.
Gli di devono essere univoci, nel senso che non possono esistere n elementi con lo stesso id (mentre possono esistere n elementi con la stessa classe).
Una soluzione rapida per non impegnarsi in troppi calcoli e avere è quella di aggiungere la regola box-sizing:border-box a tutti gli elementi. Guarda qui: http://jsfiddle.net/5mgfL10s/. Altrimenti potresti settare l'altezza del container pari a 10*(altezza div + bordo) come visibile qui:http://jsfiddle.net/5mgfL10s/1/

P.s: è un topic da CSS non HTML5

ciao!

**Trommo** · 06-10-2014, 16:42

Chiedo scusa e grazie mille per l'aiuto

Discussione: dividere div

Strumenti discussione

Ricerca discussione

Visualizza

dividere div

Permessi di invio