Problema div e width

[freddie991]

Ho questi CSS

.datagrid table { border-collapse: collapse; text-align: left; width: 100%; } .datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }.datagrid table td, .datagrid table th { padding: 3px 10px; }.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; color:#FFFFFF; font-size: 19px; font-weight: bold; border-left: 0px solid #0070A8; } .datagrid table thead th:first-child { border: none; }.datagrid table tbody td { color: #00557F; border-left: 1px solid #E1EEF4;font-size: 12px;font-weight: normal; }.datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }

per questo div

<div class="datagrid"><table> <thead><tr><th>Database</th></thead> <tbody><tr><td>data</td></tr> </tbody> </table></div>

Il problema è che così settato la div prende in larghezza tutta la pagina. Non riesco a trovare il parametro width giusto per accorciare tutto il table. Non funziona nemmeno se metto <div class="datagrid" width="tot.px">

[Lillo78]

Hey man,

scusa ma non ho capito cosa vuoi fare.
Vuoi che la tebella non sia grande tanto quanto la finestra del browser?
Nei css, con un width:500px; si ridimensiona a 500px.
Ma credo di aver capito male la tua richiesta.
Puoi spiegarti meglio?

[freddie991]

Con il codice che ho messo il div prende tutta la pagina in larghezza. Com'è il codice per settare la larghezza di questo div? Questo div compare come una casella, devo settarla ad 1/3 di larghezza di pagina, in quanto ne vorrei inserire 3 una affianco all'altra.

[freddie991]

Provo a riformulare la domanda, in quanto in minimissima parte ho risolto.

Nel body ho scritto

<div class="datagrid" style="width: 300px; height: 270px;">

In questo modo il div forma quasi un riquadro che occupa 1/4 della pagina in orizzontale.

QUello che ho intenzione di fare è mettere più DIV (dello stesso tipo) orizzontalmente.

Insomma devono venire 3/4 DIV a forma di riquadro allineati orizzontalmente.

Con il codice che ho qui sopra ricopiato però, ovviamente il Div successivo me lo mette direttamente a capo.

Come faccio a mettere 3 DIV (uguali per css e dimensioni) allineati in orizzontale?

[Lillo78]

Ciao man,

scusa innanzitutto per il ritardo ma scrivo dall' Australia e il fuso orario è un problema.
Comunque ecco la soluzione:
Racchiudere i 3 div contenenti le rispettive tabelle all'interno di un div contenitore che occupa il 100% della pagina e settargli la posizione a absolute, (position:absolute).
A questo punto per i 3 div dovresti settare la posizione a relative (position:relative), cioè che vengono posizionati in base all'elemento che li contiene e settarne anche la dimensione al 33% se vuoi 3 div, se inceve ne vuoi 4 sarà 25% e cosi via. Fatto questo utilizzi la proprietà float, cosi che gli elementi non seguano il normale flusso ma si dispongano uno alla sinistra dell'altro (float:left).
Con questo tipo di codice, usando le percentuali e senza settare il paramentro "height" otterrai un layout di tipo fluido, cioè che si ridimensiona automaticamente a seconda della grandezza del browser.
Questo ti permettera di gestire meglio pagine con testi dinamici, variabili e molto grandi e soprattutto ti permetterà di rendere il tuo sito adattabile a più dispositivi, come table o smartphone.
ecco il codice css:

#contenitore{ width:100%;height:auto;position:absolute;} .datagrid table { border-collapse: collapse; text-align: left; width: 100%;} table{position:relative;} .datagrid { width:33%;font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; float:left;} .datagrid table td, .datagrid table th { padding: 3px 10px; } .datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progidXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; color:#FFFFFF; font-size: 19px; font-weight: bold; border-left: 0px solid #0070A8; } .datagrid table thead th:first-child { border: none; }.datagrid table tbody td { color: #00557F; border-left: 1px solid #E1EEF4;font-size: 12px;font-weight: normal; } .datagrid table tbody td:first-child { border-left: none; } .datagrid table tbody tr:last-child td { border-bottom: none; }

ed il codice html:

<html> <head> <style type="text/css"> </style> </head> <body> <div id="contenitore"> <div class="datagrid"> <table> <thead> <tr> <th>Database</th> </tr> </thead> <tbody> <tr> <td>data</td> </tr> </tbody> </table> </div> <div class="datagrid"> <table> <thead> <tr> <th>Database</th> </tr> </thead> <tbody> <tr> <td>data</td> </tr> </tbody> </table> </div> <div class="datagrid"> <table> <thead> <tr> <th>Database</th> </tr> </thead> <tbody> <tr> <td>data</td> </tr> </tbody> </table> </div> </div> </body> </html>

per qualsiasi problema no worries.
Byeee