CODEWITHSUNDEEP
htmlcss
cory
cory

Reputation: 11

Arrange horizontal div inside parent div

I would like achieve what is shown in the image below, meant to select colors using CSS3.

image

The code is currently here.

.colors {
  background: white;
  width: 80%;
  height: 10%;
  position: absolute;
  top: 60%;
  display: inline-block;
  overflow-x: scroll;
  white-space: no-wrap;
}

.select {
  float: left;
  margin: 10px;
  color: transparent;
  z-index: 22;
  background: red;
  width: 20%;
}
<div class="colors">
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"> </div>
</div>

The divs I made aren't showing up. What can I do to solve this?

Upvotes: 1

Views: 69

Answers (2)

Mohamed Mohaideen AH
Mohamed Mohaideen AH

Reputation: 2545

Remove the float:left method from selection class. Try like this.

.colors {
  background: black;
  width: 80%;
  height: 20%;
  position: absolute;
  top: 60%;
  overflow: auto;
  white-space: nowrap;
}

.select {
  
  margin: 10px;
  color: transparent;
  z-index: 22;
  background: red;
  width: 20%;
  height: 80%;
  display:inline-block;
}
<!DOCTYPE html>
<html>
<body>

<div class="colors">
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"> </div>
</div>
</body>
</html>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273010

Your div aren't showing because you didn't set any height to them. You have also a syntax error here white-space: no-wrap as it should be white-space: nowrap.

By the way, you can simply use flex instead of floating elements. When using flex you are not obliged to specify the height of the element :

.colors {
  background: white;
  width: 80%;
  height: 100px;
  margin: auto;
  display: flex;
  flex-wrap: nowrap; /* this is not mandatory as it's the default value*/
  overflow-x: scroll;
  border: 1px solid;
}

.select {
  margin: 10px;
  color: transparent;
  background: red;
  flex: 0 0 20%;
}
<div class="colors">
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"> </div>
</div>

Or inline-block solution. But here you need to specify the height and pay attention to overflow :

.colors {
  background: white;
  width: 80%;
  height: 100px;
  margin: auto;
  overflow-x: scroll;
  border: 1px solid;
  white-space:nowrap;
}

.select {
  margin: 10px;
  color: transparent;
  background: red;
  display:inline-block;
  height:calc(100% - 24px); /* You need to remove both margin and height of scroll*/
  width:20%;
}
<div class="colors">
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"> </div>
</div>

Upvotes: 1

Related Questions