css style of image table

 

box wraps:

<style type="text/css">
	.box_container{
		border: 1px solid #aaaaaa;
		background-color: white;
		width: 460px;
		height: 290px;
		padding: 0 0 10px 30px;
		margin: 5px 5px;
	}

	.box_container .box{
		border: 1px solid red;
		background-color: #FFFAE3;
		width: 70px;
		height: 100px;
		position: relative; /* The price span is fixed at the bottom of the div*/
		float: left; /* boxes are arranged horizontally*/
		margin-top: 30px;
		margin-right: 10px;
		text-align: center; /* text and images are centered horizontally*/
	}

	.box_container .box img{
		width:65px;
		height:70px;
	}

	.box_container .box span{
		width:100%;
		height:25px;
		background-color:#EE7621;
		color:white;
		font-size:11px;
		font-weight: 600;
		padding-top: 3px;
		position:absolute; /* The price span is fixed at the bottom of the div*/
		left:0; /* The price span is fixed at the bottom of the div*/
		bottom:0; /* The price span is fixed at the bottom of the div*/
	}
</style>

 

 

 

box does not wrap automatically:

<style type="text/css">
	.box_container{
		border: 1px solid #aaaaaa;
		background-color: white;
		width: 460px;
		height: 290px;
		padding: 0 0 10px 30px;
		margin: 5px 5px;

		 /* boxes are arranged horizontally*/
		display: block;
		overflow: auto; /* scroll bar automatically appears when out of bounds*/
		white-space: nowrap; /* do not automatically wrap */
	}

	.box_container .box{
		border: 1px solid red;
		background-color: #FFFAE3;
		width: 70px;
		height: 100px;
		position: relative; /* The price span is fixed at the bottom of the div*/

		 /* boxes are arranged horizontally*/
		display: inline-block; /* display on the same line */

		margin-top: 30px;
		margin-right: 10px;
		text-align: center; /* text and images are centered horizontally*/
	}

	.box_container .box img{
		width:65px;
		height:70px;
	}

	.box_container .box span{
		width:100%;
		height:25px;
		background-color:#EE7621;
		color:white;
		font-size:11px;
		font-weight: 600;
		padding-top: 3px;
		position:absolute; /* The price span is fixed at the bottom of the div*/
		left:0; /* The price span is fixed at the bottom of the div*/
		bottom:0; /* The price span is fixed at the bottom of the div*/
	}
</style>