fioat:ボックスの回り込み位置を指定する。

{float:回り込み位置;}
＜回り込み位置＞
none　回り込みを指定しない
left　　ボックスを左寄せにする、その後に続く要素は右側に回りこむ
right　ボックスを右寄せにする、その後に続く要素は左側に回りこむ

今回、HPのサンプル作成の為に以下の様に配置しました。
↓一部

html

<div class="main1">
			<div class="main2">
				<img src="img/top_m1.jpg" alt=ビル style="border:solid 3px #ebebeb">
				<div class="box2">
					<p>自然との調和を目指す企業です</p>
					<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
					<div class="box2-1">
						<p>詳細を確認する</p>
					</div>
				</div>
			</div>
			<div class="main3">
				<img src="img/top_m2.jpg" alt=PC style="border:solid 3px #ebebeb">
				<div class="box3">
					<p>自然との調和を目指す企業です</p>
					<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
					<div class="box3-1">
						<p>詳細を確認する</p>
					</div>
				</div>
			</div>
			<div class="main4">
				<img src="img/top_m3.jpg" alt=PC2 style="border:solid 3px #ebebeb">
				<div class="box4">
					<p>自然との調和を目指す企業です</p>
					<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
					<div class="box4-1">
						<p>詳細を確認する</p>
					</div>
				</div>
			</div>
		</div>

CSS

.main2 {
	float:left;
	border: solid #ebebeb 1px;
	width:280px;
	height:230px;
	padding:10px 0px 0px 10px;
	margin:5px 0px 30px 300px;
}
.box2{
	width:270px;
	margin:10px 0px 0px 7px;
	font-size:12px;
	line-height:100%;
}
.box2-1{
	margin:5px 8px 0px 170px;
	color:#83c61a;
}
.main3 {
	float:left;
	border: solid #ebebeb 1px;
	width:280px;
	height:230px;
	padding:10px 0px 0px 10px;
	margin:5px 0px 30px 25px;
}
.box3{
	width:270px;
	margin:10px 0px 0px 7px;
	font-size:12px;
	line-height:100%;
}
.box3-1{
	margin:5px 8px 0px 170px;
	color:#83c61a;
}
.main4{
	float:left;
	border: solid #ebebeb 1px;
	width:280px;
	height:230px;
	padding:10px 0px 0px 10px;
	margin:5px 0px 30px 25px;
}
.box4{
	width:270px;
	margin:10px 0px 0px 7px;
	font-size:12px;
	line-height:100%;
}
.box4-1{
	margin:5px 8px 0px 170px;
	color:#83c61a;
}