CODEWITHSUNDEEP
htmlcsswidth
Abhay
Abhay

Reputation: 526

CSS: width property is not working for div tags

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>

Upvotes: 0

Views: 2822

Answers (2)

95faf8e76605e973
95faf8e76605e973

Reputation: 14201

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>

Upvotes: 1

VSM
VSM

Reputation: 1785

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;
  margin: 0 auto;
}

.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: 0;
    margin: 0 5%;
    margin-top: 15px;
    box-sizing: border-box;
    border-width:1px;
}

.product-2{
	display: block;
    position: relative;
    /* padding-left: 10%; */
    /* padding-right: 10%; */
    /* margin-top: 15px; */
    float: left;
    /* left: 50%; */
    width: 40%;
    overflow: hidden;
    border-style: solid;
    border-color: black;
    border-width: 0;
    margin: 0 5%;
    margin-top: 15px;
    box-sizing: border-box;
    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"></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>

https://jsfiddle.net/Sampath_Madhuranga/0pfygcbe/23/

This works fine. Let me know if there is any problem. Thanks

Upvotes: 1

Related Questions