CODEWITHSUNDEEP
htmlcss
hymcode
hymcode

Reputation: 91

Overlapping Boxes

I am having trouble trying to keep the boxes inside my container id, but for some reason they keep overlapping on the right hand side. I'm new to this so please go easy on me.

Overlapping Boxes

<!DOCTYPE html>
<html>
<head>
	<title>Block-Level</title>
	<style type="text/css">
		#container{
		/* Auto margins used for centering elements horizontally */
		margin-right: auto; 
		margin-left: auto; 
		/* Box dimensions */
		width: 1000px;
		/* Colour of box */
		background-color: #AA4639;
		padding: 5px;
		border-radius: 10px;
		font-size: 0;
		}
		.box1{
			width: 100%;
			height: 200px;
			background-color: #81BBC9;
			border-radius: 10px;
			display: inline-block;
			font-size: 16px;
			margin: 5px;
			padding: 5px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="box1"></div>
		<div class="box1"></div>
		<div class="box1"></div>
	</div>
</body>
</html>

Upvotes: 2

Views: 2162

Answers (3)

kamoroso94
kamoroso94

Reputation: 1735

The main issue is with box-sizing and margin. The default value for box-sizing is content-box, so when you set the width, that won't be including any paddings, border-widths, or margins. When you set it to border-box, the padding gets put inside the width of the element.

With margin, however, it's still outside the border-box, so it pushes against its container on the left. That's what causes the overlap to happen.

By removing the margins on the outside of the boxes and only preserving the margins between boxes, we eliminate this issue.

* {
  box-sizing: border-box;
}

#container {
  /* Auto margins used for centering elements horizontally */
  margin: 0 auto;
  /* Box dimensions */
  width: 1000px;
  /* Colour of box */
  background-color: #AA4639;
  padding: 10px;
  border-radius: 10px;
  font-size: 0;
}

.box1 {
  width: 100%;
  height: 200px;
  background-color: #81BBC9;
  border-radius: 10px;
  display: inline-block;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 5px;
}

.box1:last-child {
  margin-bottom: 0;
}
<div id="container">
  <div class="box1"></div>
  <div class="box1"></div>
  <div class="box1"></div>
</div>

Upvotes: 1

blurfus
blurfus

Reputation: 14031

Removing margin, padding from sides but not top/bottom. As in:

/* vertical | horizontal */
margin: 5px 0;
padding: 5px 0;

See demo: 

#container {
  /* Auto margins used for centering elements horizontally */  
  margin-right: auto;
  margin-left: auto;
  /* Box dimensions */
  width: 500px;
  /* Colour of box */
  background-color: #AA4639;
  padding: 5px;
  border-radius: 10px;
  font-size: 0;
}

.box1 {
  width: 100%;
  height: 200px;
  background-color: #81BBC9;
  border-radius: 10px;
  display: inline-block;
  font-size: 16px;
  margin: 5px 0; /* here */
  padding: 5px 0; /* here */
}
<div id="container">
  <div class="box1"></div>
  <div class="box1"></div>
  <div class="box1"></div>
</div>

Upvotes: 1

Jacob Murdock
Jacob Murdock

Reputation: 9

This is simply because when you declare width: 100% in box1, the width becomes the same as your container! Try statically assigning the width, or changing it to a value less than 100%, like 98% as below.

<!DOCTYPE html>
<html>
<head>
	<title>Block-Level</title>
	<style type="text/css">
		#container{
		/* Auto margins used for centering elements horizontally */
		margin-right: auto; 
		margin-left: auto; 
		/* Box dimensions */
		width: 1000px;
		/* Colour of box */
		background-color: #AA4639;
		padding: 5px;
		border-radius: 10px;
		font-size: 0;
		}
		.box1{
			width: 98%;
			height: 200px;
			background-color: #81BBC9;
			border-radius: 10px;
			display: inline-block;
			font-size: 16px;
			margin: 5px;
			padding: 5px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="box1"></div>
		<div class="box1"></div>
		<div class="box1"></div>
	</div>
</body>
</html>

Upvotes: 0

Related Questions