Salve gente, sto ultimando il mio sito, solo che a livello di grafica e css sono un pasticcione

vorrei che l utente veda una pagina ordinata, non una schifezza.. mi piacerebbe adattare il contenuto della pagina alla risoluzione dello schermo, anche per gli schermi piu piccoli dei palmari cellulari etc..

attualmente la pagina è strutturata cosi:

è composta da 2 div principali a cui ho assegnato la classe "tutto" al primo div e "tutto2" al secondo div

- dentro il primo div ho tanti altri div , dove al loro interno ho inserito bottoni, campi di ricerca, una grande insegna centrale per il sito etc..

- dentro al secondo div invece ho inserito una grande tabella a cui ho assegnato a classe "mytable"


il problema sta nel secondo div, la tabella al suo interno è cosi grande che fuori esce dal div e mi allarga la pagina in maniera eccessiva.. mentre io vorrei che i 2 div principali avessero la stessa larghezza, in modo da essere allineati per vedere una cosa ordinata

facendo un disegnino, questa è la situazione attuale:



ho provato a ridurre le dimensioni della tabella ma non ne voleva sapere di ridimensionarsi...

sono riuscito così:

codice HTML:
.mytable {
    word-wrap: break-word; 
    word-break: break-all;
}

con questo risultato:



solo che non mi piace perchè la tabella non si è "ridimensionata" ma si è "schiacciata"... schiacciandosi per adattarsi al div, vedete che ho delle scritte che vanno sempre a capo per adattarsi alle celle, celle che rimangono piu grandi e altre piu piccole...insomma graficamente non mi sembra bello e i nomi delle colonne sono cosi illeggibili... come posso "rimpicciolire" sta tabella senza schiacciarla?

inoltre secondo voi è meglio mettere tutto in un unico div invece che avere 2 div che io ho chiamato tutto e tutto2?

come posso adattare le dimensioni del contenuto della mia pagina alla risoluzione dello schermo da dove la visualizzo? compresi schermi di dispositivi piu piccoli come cellulari etc..


codice:

codice HTML:
<div class='tutto'>
// contenuto della parte superiori del sito
</div>

<div class='tutto2'>
<table class='mytable'>

<thead>
<th></th>
<th></th>
</thead>

<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>

</table>
</div>

CSS:

codice HTML:
div.tutto {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 1340px;
    height: 362px;
    
}
div.tutto2 {
    position: absolute;
    top: 370px;
    left: 1px;
    width: 1340px;
    
}
.mytable {
    word-wrap: break-word; 
    word-break: break-all;
}

table {
  border-collapse: collapse;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
  overflow: hidden;
}
table td, table th {
    border: 1px solid white;
}
table td:hover{
    background-color: red;
}
table tr:first-child th {
    border-top: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}
th, td {
  padding: 1em;
  background: #ddd;
}