completed float code challenge

Author: Abernachy

projectfolder/css/shopStyle.css

@@ -12,10 +12,13 @@ body {
 p {
 	margin-bottom: 20px;
 }
+.product-description {
+	clear: both;
+}
 
 .product-container {
 	border: black 4px solid;
-	width: 825px;
+	width: 900px;
 	margin: 25px auto;
 	position: relative;
 }
@@ -43,17 +46,20 @@ p {
 .product-details {
 	text-transform: uppercase;
 	margin-bottom: 20px;
+	font-size: 16px;
 }
 
 .shipping {
 	text-transform: uppercase;
 	font-weight: bold;
 	color: #777;
+	float: right;
 }
 
 .price {
 	font-size: 25px;
 	margin-bottom: 0px;
+	float: left;
 }
 
 /* Link styling */
@@ -168,20 +174,25 @@ nav {
 }
 
 /* Floats */
-.product-description-container {
-	background-color: red;
-	width: 240px;
-	height: 250px;
+.product-image {
 	float: left;
+	margin-right: 40px;
 }
 
-.product-info-container {
-	float: right;
+.product-details-container {
+	/* background-color: yellow; */
+	width: 243px;
+	height: 250px;
+	float: left;
+	padding: 0px 40px;
+	/* margin-top: 20px; */
 }
 
-.product-details-container {
-	background-color: yellow;
-	width: 240px;
+.product-info-container {
+	width: 243px;
+	/* background-color: blue; */
+	float: left;
 	height: 250px;
-	float: right;
+	margin-right: 40px;
+	/* margin-top: 20px; */
 }

projectfolder/pages/challenges.html

@@ -13,43 +13,43 @@
 				</nav>
 				<h2 class="product-name">Converse Chuck Taylor All Start Low Top</h2>
 
-				<div class="product-layout-container">
-					<img
-						src="../imgs/challenges.jpg"
-						alt="A shoe"
-						height="250"
-						width="250"
-					/>
-					<div class="product-info-container">
-						<p class="price"><strong>$65.00</strong></p>
-						<p class="shipping">Free Shipping</p>
-						<p>
-							Ready to dress up or down, these classic convo Chucks are an
-							everyday wardrobe staple
-						</p>
-						<a class="more-info" href="#">
-							<p>More information &RightArrow;</p></a
-						>
+				<img
+					src="../imgs/challenges.jpg"
+					alt="A shoe"
+					height="250"
+					width="250"
+					class="product-image"
+				/>
+				<div class="product-info-container">
+					<p class="price"><strong>$65.00</strong></p>
+					<p class="shipping">Free Shipping</p>
+					<p class="product-description">
+						Ready to dress up or down, these classic convo Chucks are an
+						everyday wardrobe staple
+					</p>
+					<a class="more-info" href="#">
+						<p>More information &RightArrow;</p></a
+					>
 
-						<div class="colored-boxes">
-							<div class="black"></div>
-							<div class="blue"></div>
-							<div class="red"></div>
-							<div class="yellow"></div>
-							<div class="green"></div>
-							<div class="brown"></div>
-						</div>
-					</div>
-					<div class="product-details-container">
-						<h3 class="product-details">Product Details</h3>
-						<ul>
-							<li>Lightweight, durable and painful</li>
-							<li>Gives crippling back pain with each step</li>
-							<li>Expensive door stop</li>
-							<li>Causes depression</li>
-						</ul>
+					<div class="colored-boxes">
+						<div class="black"></div>
+						<div class="blue"></div>
+						<div class="red"></div>
+						<div class="yellow"></div>
+						<div class="green"></div>
+						<div class="brown"></div>
 					</div>
 				</div>
+				<div class="product-details-container">
+					<h3 class="product-details">Product Details</h3>
+					<ul>
+						<li>Lightweight, durable and painful</li>
+						<li>Gives crippling back pain with each step</li>
+						<li>Expensive door stop</li>
+						<li>Causes depression</li>
+					</ul>
+				</div>
+
 				<button>Add to Cart</button>
 			</article>
 		</div>