Positionnement Image et Texte

Tout d'abord bravo pour votre site !
Je tiens à préciser que je suis grand débutant en programmation web.
Je souhaite faire la chose suivante:
Je veux créer une boite contenant:
- un titre
- une liste d'élements (image + description)
- et une barre de navigation
Sur une meme page je veux pouvoir placer 2 boites par lignes.
Mais je n'arrive pas à aligner l'image à gauche et le texte à droite dans les elements.
Voici mon code CSS:

.HomeBox{
	border: 2px solid #91C417;
	float: left;
	width: 49%;
	margin: 1em 1px;
}
.HomeBox h2{
	color:white;
	margin: 0; 
	font-size:1.3em;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing:-0.01em;
        background: #91C417;
}

.HomeBox ul li{
	color: black;
	background-position: 0px 0px;
	padding: 0px 0px 0px 0px;
	margin-left: 0px;
        list-style-image:none;
        list-style-position:outside;
        list-style-type:none;
}

.HomeBoxImg{
float:left;
}

.HomeBoxNav{

}

Et le code Html associé:

<div  class="HomeBox">
   <h2>Voitures occasions</h2>
   <ul>
     <li>
       <div class"HomeBoxImg">
          <a href="#" class="">
            <img src="http://url/img1.jpg" alt="" title=""/>
          </a>
        </div>
        <a href="/choucroute.php">Choucroute</a>
        Du choux de la saucisse, etc...
	<a href="/choucroute.php">Plus d'info</a>
      </li>
      <li>
        <div class"HomeBoxImg">
           <a href="#" class="">
             <img src="http://url/image2.jpg" alt="" title=""/>
	   </a>
	</div>
        <a href="/couscous.php">Couscous</a> Prix en Euro<br>
	Semoule, Merguez, légumes, etc ....
	<a href="/couscous.php">Plus d'info</a>
      </li>
    </ul>
    <div class="HomeBoxNav">
	Naviagtion
    </div>
</div>

Remarque: je n'ai encore rien fait pour la div appelé HomeBoxNav, je compte faire une numérotation pour passer d'une page à une autre (du style: premiere 1 2 3 derniere).

Merci pour votre aide.

J'ai une solution pour toi, mais étant donné que je suis un simple débutant moi aussi, eh bien, ça vaut ce que ça vaut:

	
                       .HomeBox{
			border: 2px solid #91C417;
			float: left;
			width: 49%;
			margin: 1em 1px;
			}
			.HomeBox h2{
			color:white;
			margin: 0;
			font-size:1.3em;
			font-weight: bold;
			font-family: Arial, Helvetica, sans-serif;
			letter-spacing:-0.01em;
			background: #91C417;
			}
			.HomeBox ul li{
			color: black;
			background-position: 0px 0px;
			padding: 0px 0px 0px 0px;
			margin-left: 0px;
			list-style-image:none;
			list-style-position:outside;
			list-style-type:none;
			}
			.HomeBoxImg{
			float:left;
			}
			.HomeBoxNav{
			}
			ul#galerie {
			float:left;
			}
			#galerie h4 {margin-top:60px;}
			ul#galerie li {
			float:left;
			display:inline;
			width:100%;
			text-align: center;
			}
			ul#galerie img {
			display:inline;
			float:left;
			width:110px;
			height:110px;
			border:0px solid;
			margin:20px 10px 0 0;
			}

<div  class="HomeBox">
			<h2>Voitures occasions</h2>
			<ul id="galerie">
				<li>
					<img src="img1.jpg" alt="" title=""/>
					<h4><a href="/choucroute.php">Choucroute</a>
						Du choux de la saucisse, etc...
						<a href="/choucroute.php">Plus d'info</a>
					</h4>
				</li>
				<li>
					<img src="img1.jpg" alt="" title=""/>
					<h4><a href="/choucroute.php">Choucroute</a>
						Du choux de la saucisse, etc...
						<a href="/choucroute.php">Plus d'info</a>
					</h4>
				</li>
				<li>
					<img src="img1.jpg" alt="" title=""/>
					<h4><a href="/choucroute.php">Choucroute</a>
						Du choux de la saucisse, etc...
						<a href="/choucroute.php">Plus d'info</a>
					</h4>
				</li>
			</ul>
			<div class="HomeBoxNav">
				Naviagtion
			</div>
		</div>