Erreur de positionnement

Bonjour a tous,

Je suppose qu'il ne doit y avoir rien de tres dificile dance ce possitionnement mais apres plusieur jour a essayer différent paramétrage de mon code css et avoir fouille google et alsa je m'en remet a vous pour trouver reponse a mon probleme de positionnement.

J'ai deux bloc "presentation" (gauche) et "infos" (droite) contenu dans un bloc "cv" (global) et je souhaite que le bloc "presentation" s'allonge en s'adaptant toujours au bloc "infos" (recevant d e nouvelles donnée et gagnant au fur et a mesure du contenu ) et que ce bloc présentation soit toujours coller en haut et en bas de mon ecran. dailleur , cette colonne gauche n'est pas affiché en longueur de la meme façon sur mon ecran d'ordinateur mini portable et celui de mon bureau , je ne comprend pas bien la raison de cette erreur d'affichage .

Merci a tous pour votre aide

voici mon code:
Page html

<div id="presentation"> <!-- BLOC PRESENTATION PERSO-->
		<h2>xxx</h2><br>
		<p><span>xxx</span>xxx</p>
		<p><span>xxx</span>xxx</p>
		<p><span>xxx</span>xxx</p>
		<p><span>xxx</span>xxx</p>
		<h3>Qui suis-je ?</h3>
		<p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
		bla.</p>
		<p><a href="V1">XHTML strict 1.0 - CSS 2.0</a>/<a href="V2">HTML 5 - CSS 3</a></p>

	</div>
<div id="infos"> <!-- BLOC DETAIL CV-->
		<ul class="evitement">
	
		<li><a href="#cursus" title="Cursus de formation">Cursus</a></li>.
		<li><a href="#expe" title="Expériences professionels">Expériences pro</a></li>.
		<li><a href="#divers" title="Loisirs">Loisirs et divers</a></li>.
		<li><a href="#comp" title="Compétences informatique">Compétences informatique</a></li>
		</ul>

		<h2>Cusus de formation :</h2>

		<p class="situation"></p>
		<p>Détail</p>

		<h2 id="expe">Expériences porfessionnelles :</h2>
		<h3>xxx</h3>
		<p class="situation">xxx</p>
		<p><span>xxx</span> xxx</p>
		<p><span>xxx</span> xxx</p>
		<h3>xxx</h3>
		<p>xxx</p>

CSS (quelques code pour essai de CSS3)

body {
	margin: 0 ;
	padding: 0 0 0 0;
	text-align: center ;
	font: 12px "Calibri", helvetica, sans-serif ;
}
/*--1.COULEURS / PERSONNALISATION--

- color: p, a, Hx, ...
- url
- background
---------------------------------*/
/*-- BLOC CV (Global)--*/
/*-- BLOC PRESENTATION (Partie gauche)--*/
#presentation {
background: #bfbfbf; 
-moz-box-shadow: 1px 0.1em 8px #666;}

#presentation p, h2, h3 {color: #fff;}
#presentation span {color: #a6a6a6;}
#presentation a {
	background:#bfbfbf; 
	color:#fff; 
	margin:3px; 
	text-decoration: none; 
	font-size: 0.8em;
	padding: 2px 6px ;
/* CS3 Bordure arrondis/Ombrage */
	-moz-border-radius: 5px;
	-khtml-border-radius:5px; 
	-webkit-border-radius:5px;
	-moz-box-shadow: 0.1em 0.1em 1px #888; }
	
/*-- BLOC INFOS (partie droite)--*/
#infos {background: #fff; }
#infos h2 {color: #ff9900; }
#infos h3 ,span {color: #99cc00; }
#infos p {color: black; }
.situation p {color: #a6a6a6; }
	
/*--2.POSITIONNEMENT---------------

width, height, margin, padding, 
float, position, text-align,
---------------------------------*/
/*-- BLOC PRESENTATION (Partie gauche)--*/
/*-- BLOC INFOS (partie droite)--*/
* {padding:0; margin:0;} 
#CV {position: relative; width:100%; margin: 0 auto;} 
#presentation {position:absolute; width:300px; text-align:right;} 
#infos { margin-left:300px; text-align: left; padding-left: 30px; padding-right: 30px;}
#presentation, #infos {height: 100%; }
#infos h3, p {padding-left: 20px; text-align: justify; }
#presentation h2, #infos h2 {padding-top: 20px; }
#infos h2 {letter-spacing: 0.3em; }
#infos h3 {padding-top: 10px;}
#presentation h2 {font-size: 2.6em; font-weight: bold; text-align:right; }

.evitement {float: right; top:0; margin: 0; padding: 0;}
.evitement li {display: inline;}
.evitement a {color: #bfbfbf; text-decoration:none; outline: none;}
.evitement a:hover {color: #99cc00;}

Modifié par worms30 (10 May 2010 - 14:31)

http://forum.alsacreations.com/topic-4-48535-1-Etirer-bloc-jusquau-bas-de-la-page.html