I am trying to create a Product catalog. I have planned to create multiple rows whereas in each row there would be 2 products each.
Thus in each row the 1st product belongs to product-1 class and 2nd product belongs to product - 2 class.
I have divided the page vertically into two parts using float:left and specified width:50% for both classes.
And also for product-2 class I have specified left:50% (to push it to left)
I have kept display:block , position:relative for both classes.
But the width property seems to not be working.
Code: https://jsfiddle.net/abhaygc/0pfygcbe/
Code Snippet:
body{
height: 100vh;
margin: 0px;
overflow: scroll;
}
.header{
background-color: white;
height:8%;
overflow: hidden;
font-style: "Roboto";
font-size: 25px;
border-bottom: 2px solid;
border-bottom-color: #cccccc;
}
#clear{
clear: both;
}
.logo{
margin-top: 12px;
float: left;
left: 0px;
padding-right: 50px;
}
#logo:hover{
background: transparent;
}
.links{
display: block;
float: right;
margin-right: 10px;
margin-top: 10px;
}
a{
position: relative;
right: 0px;
/*top: 25px;*/
padding-left: 10px;
padding-right: 10px;
color:black;
letter-spacing: 2px;
font-weight: 200;
text-decoration: none;
}
a:hover{
background-color:#cccccc;
}
.content{
display: block;
background-color: white;
height: 92%;
margin-top: 0px;
}
#clear{
clear: both;
}
.image{
display: block;
width: 200px;
height: 200px;
border-style: dashed;
border-color: red;
border-width: 2px;
overflow: hidden;
}
.product-1{
display: block;
position: relative;
padding-left: 10%;
padding-right: 10%;
margin-top: 5%;
float: left;
left: 0px;
width: 40%;
overflow: hidden;
border-style: solid;
border-color: black;
border-width: 1px;
}
.product-2{
display: block;
position: relative;
padding-left: 10%;
padding-right: 10%;
margin-top: 5%;
float: left;
left: 50%;
width: 50%;
overflow: hidden;
border-style: solid;
border-color: black;
border-width: 1px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="products.css">
<title>Products</title>
</head>
<body>
<div class="header">
<div class="logo">
<a href="home.html"><img id="logo"src="logo.png" alt="LOGO"></a>
</div>
<div class="links">
<a href="home.html">Home</a>
<a href="products.html">Products</a>
<a href="login.html">Login</a>
<a href="register.html">Register</a>
<a href="home.html">Contact</a>
<a href="home.html">About</a>
</div>
</div>
<div class="content">
<div class="product-1 product">
<div class="image">
<img src="slide-4.jpg" alt="Image 1" />
</div>
<div class="caption">
</div>
</div>
<div class="product-2 product">
<div class="image">
<img src="slide-5.jpg" alt="Image 2"/>
</div>
<div class="caption">
</div>
</div>
<div id="clear"></div>
<div class="product-1 product">
<div class="image">
<img src="slide-6.jpg" alt="Image 3"/>
</div>
<div class="caption">
</div>
</div>
<div class="product-2 product">
<div class="image">
<img src="slide-5.jpg" alt="Image 4"/>
</div>
<div class="caption">
</div>
</div>
</div>
</body>
<script type="text/javascript" src="products.js"></script>
</html>The width in .product-2 does does not visibly work because of the left: 50% property you have assigned to it. If you remove that, then assigning a width to .product-2 will work.
I have added a <div class="row"> to each of your division to distinctly divide them as a row. I assigned float-right to .product-2 and a sample width of 200px so you can see the width working. Hope this answers your question, good luck
body{
height: 100vh;
margin: 0px;
overflow: scroll;
}
.header{
background-color: white;
height:8%;
overflow: hidden;
font-style: "Roboto";
font-size: 25px;
border-bottom: 2px solid;
border-bottom-color: #cccccc;
}
#clear{
clear: both;
}
.logo{
margin-top: 12px;
float: left;
left: 0px;
padding-right: 50px;
}
#logo:hover{
background: transparent;
}
.links{
display: block;
float: right;
margin-right: 10px;
margin-top: 10px;
}
a{
position: relative;
right: 0px;
/*top: 25px;*/
padding-left: 10px;
padding-right: 10px;
color:black;
letter-spacing: 2px;
font-weight: 200;
text-decoration: none;
}
a:hover{
background-color:#cccccc;
}
.content{
display: block;
background-color: white;
height: 92%;
margin-top: 0px;
}
#clear{
clear: both;
}
.image{
display: block;
width: 200px;
height: 200px;
border-style: dashed;
border-color: red;
border-width: 2px;
overflow: hidden;
}
.product-1{
display: block;
position: relative;
padding-left: 10%;
padding-right: 10%;
margin-top: 5%;
float: left;
left: 0px;
width: 175px; /* sample width */
overflow: hidden;
border-style: solid;
border-color: black;
border-width: 1px;
}
.product-2{
display: block;
position: relative;
padding-left: 10%;
padding-right: 10%;
margin-top: 5%;
float: right;
width: 175px; /* sample width */
overflow: hidden;
border-style: solid;
border-color: black;
border-width: 1px;
}<body>
<div class="header">
<div class="logo">
<a href="home.html"><img id="logo"src="logo.png" alt="LOGO"></a>
</div>
<div class="links">
<a href="home.html">Home</a>
<a href="products.html">Products</a>
<a href="login.html">Login</a>
<a href="register.html">Register</a>
<a href="home.html">Contact</a>
<a href="home.html">About</a>
</div>
</div>
<div class="content">
<div class="row">
<div class="product-1 product">
<div class="image">
<img src="slide-4.jpg" alt="Image 1" />
</div>
<div class="caption">
</div>
</div>
<div class="product-2 product">
<div class="image">
<img src="slide-5.jpg" alt="Image 2"/>
</div>
<div class="caption">
</div>
</div>
</div>
<div id="clear"></div>
<div class="row">
<div class="product-1 product">
<div class="image">
<img src="slide-6.jpg" alt="Image 3"/>
</div>
<div class="caption">
</div>
</div>
<div class="product-2 product">
<div class="image">
<img src="slide-5.jpg" alt="Image 4"/>
</div>
<div class="caption">
</div>
</div>
</div>
</div>
</body>