Ciao a tutti,

ho un problema con i css.

Mi servirebbe innanzittutto un consigloio sulla pagina matrice che sto realizzando ( premetto che sono un newbie su questo campo )

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>INSERIMENTO NUOVO DDT</title>
<link rel="stylesheet" href="../css/style_add.css" media="screen" />

</head>

<body>




<div id="contenitore">
<div id="header">
<?php  require_once	('top_page.php');?>
</div>

<div id="body">
<div id="menu_left">


 </p>
<?php  require_once	('left_menu.php');?>
</div>

<div id="scheda_lavoro">
<div id="scheda_lavoro2">
 
</div>
</div>



</div>

</div>
<div id="footer">
</div>




</body>
</html>

La pagina top_page.php è strutturata così

codice:
<div id="logo"></div>
<div id="immagine"></div>
<div id="info_utente">
<table align="center">
<tr>
<td>Benvenuto 
<?php echo $row_LoggedUser['nome']; ?> <?php echo $row_LoggedUser['cognome']; ?></td>
</tr>
<tr>
<td>Logout</td>
</tr>
</table>
</div>
Da quello che si può capire ho pensato a questa gerarchia:

CONTENITORE PRINCIPALE
CONTENITORE HEADER (Questo a sua volta contiene altri 3 contenitori stile tabella con 3 colonne)
CONTENITORE BODY
MENU_LEFT
SCHEDA_LAVORO
SCHEDA_LAVORO2 ( Questa l ho aggiunta per dare alle tabelle un minimo margine )
CONTENITORE FOOTER

Secondi voi è giusta la logica? ( Sono convinto che ci sia qualcosa di sbagliato )

Il css è il seguente

codice:
body{
font-size:75%;
width:100%;
height:auto;
background:url(../img/Nuova/qwe2.png) repeat;
}

#contenitore{
width:100%;
height:100%;
font-family:Arial, Helvetica, sans-serif;
color:#999999;	
}

#header {
background:url(../img/Nuova/qwe2.png) repeat;
width:100%;
height:120px;
background-color:#ffffff;
}

#logo{
float:left;
background:url(../img/imgGest/tecnidata_logo.jpg) no-repeat;
width:15%;
height:120px;
}
#immagine{
display:inline;
float:left;
width:62%;
height:120px;
margin-left:3px;
background:url(../img/imgGest/header_image.jpg) no-repeat;
}
#info_utente{
clear:right;
float:left;
overflow:hidden;
width:22%;
height:120px;
}
#info_utente table{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
color:#006699;
}
#info_utente a{
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#0099CC;
}
#info_utente a:hover{
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FF0000;
}

#menu_left{
float:left;
width:15%;
height:auto;
margin-top:10px;
padding-bottom:10px;
}
#scheda_lavoro{
display:inline;
float:left;
width:84%;
height:100%;
background:url(../img/imgGest/homePageSeperator.gif) no-repeat;
}
#scheda_lavoro p{
margin:10px;
padding:15px;
}

#scheda_lavoro2{
margin-left:20px;
width:100%;
}
#footer{
display:inline;
float:left;
width:100%;
height:auto;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#006699;
}

Passo al secondo problema:

Quando ridimensiono il browser, i div che sono all'interno di top page si sovrappongono l'un l'altro (Le immagini che contengono questi due div si sovrappongono) e non riesco a dargli uno stile "fisso" tipo quello che spiega html.it nel tutorial dei layout a due e tre colonne.

A me serve uno stile che occupi tutta la pagina e che non faccia sovrapporre i div uno sopra l'altro.

Come posso fare?

Almeno un esempio sarebbe gradito per poter capire meglio, vi prego, non rimandatemi a delle guide.

Grazie a tutti.