Bannière (header) positionnement et insertion d'images.

Bonjour,

Peut-être que quelqu'un peut m'aider avec du positionnement CSS pour du HTML.
J'essai d'avoir deux divisions pour construire une bannière.

Dans la division qui est à gauche (logo). il y a un hyperliens qui nous ramène à la page d'accueil.

La division de droite doit se mettre à la suite de la division de gaucher. Cette division est en background. La division de droite (banniereFond) contiendra une sous-division (connexion) et une sous division (menu).

<header>

	<div id="banniere">
				
				
			<!-- Logo hyperlien -->
			<p>
				<a href="index.html">
				<div id="logo"></div>
			        </a>
			</p>
					
					


			<!-- Fond bleu -->
			<div id="banniereFond"></div>
				
				


			<!-- Connexion-->
			<label for="txtUtilisateur" >Utilisateur : </label>
			<input class="txtConnexion" type="text" name="txtUtilisateur" id="txtUtilisateur" />
						
						
						<br/>
					
					
			<label for="txtMotDePasse" >Mot de passe : </label>
			<input class="txtConnexion" type="password" name="txtMotDePasse" id="txtMotDePasse" />
						
					
						<br/><br/>
						
				
			<!-- BOUTON NON-FORMULAIRE-->
			<button>Connexion</button>
				
			<!-- BOUTON NON-FORMULAIRE-->
			<button>Inscription</button>

	</div>
			
</header>

body
{
	background-color:black;
	color:white;
	font-family:Verdana, Arial;
	font-size:0.9em;
	color:white;
}


h1
{
	font-family:"Arial";
	font-size:2.2em;
	border-bottom: 1px ridge #EEE;
	text-align:center;
	font-variant:small-caps;
	margin-top:0px;
}


a img
{
	border:0;
}


#page
{
	margin-left:160px;
	width:1024px;

}


#banniere
{
	margin-top:-10px;
	background-size: 100%;
}



#logo
{
	background-image:url("../images/1-en-tete/logo.png" );
	background-repeat:no-repeat;
	
	width: 100%; 
	height:300px;
}


#banniereFond
{	
	background-image:url('../images/1-en-tete/banniere-bleu-ombre.png');
	background-repeat:no-repeat;
	/*background-position:;*/
	background-size:1024px;
	
	position:relative;
	
	width: 200%; 
	height:300px;
	/*z-index=-1;*/
	
}


.memeLigne
{
	display:inline;
}



#connexion
{
	position:top right;
}

#connexion label
{
	margin-left:20px;
	width:120px;
	display:inline-block;
}

#connexion button
{
	height:30px;
	width:100px;
	margin-left:20px;
}


.txtConnexion
{
	display:inline-block;

}