position in a U shape

Question

position in a U shape

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I try to position the 3 elements in a U shape but for some reason there is a space that separates them

I mean this space

.car {
  width: 100px;
  position: relative;
  height: 50px;
}

.cara {
  width: 30px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
}

.Loader {
  width: 100px;
  height: 20px;
  background-color: red;
  position: absolute;
  bottom: 0;
}

.Back {
  width: 10px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 0;
  right: 0;
}

<div class="car">
  <div class="cara"></div>
  <div class="Back">
    <div id="topForm"></div>
    <div id="bottomForm"></div>
  </div>
  <div class="pala">
  </div>
  <div class="Loader">
  </div>

</div>

css

asked by hubman 06.12.2017 в 01:06

source

2 answers

3

The height of the div with face class should be higher, just half, like the div with class back. If you put height=50px you divide the total of the height that is 100px in both.

.car {
  width: 100px;
  position: relative;
  height: 50px;
}

.cara {
  width: 30px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
}

.Loader {
  width: 100px;
  height: 20px;
  background-color: red;
  position: absolute;
  bottom: 0;
}

.Back {
  width: 10px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 0;
  right: 0;
}

<div class="car">
  <div class="cara"></div>
  <div class="Back">
    <div id="topForm"></div>
    <div id="bottomForm"></div>
  </div>
  <div class="pala">
  </div>
  <div class="Loader">
  </div>

</div>

Or, in case the square has to be the size you have in the example, the container must be less tall, and the other side (back) must also have less height.

.car {
  width: 100px;
  position: relative;
  height: 35px;
}

.cara {
  width: 30px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
}

.Loader {
  width: 100px;
  height: 20px;
  background-color: red;
  position: absolute;
  bottom: 0;
}

.Back {
  width: 10px;
  height: 15px;
  background-color: red;
  position: absolute;
  top: 0;
  right: 0;
}

<div class="car">
  <div class="cara"></div>
  <div class="Back">
    <div id="topForm"></div>
    <div id="bottomForm"></div>
  </div>
  <div class="pala">
  </div>
  <div class="Loader">
  </div>

</div>

answered by 06.12.2017 в 02:12

Input does not assign value Execution time permissions

score 2 · Accepted Answer

To achieve what you want, just invest the values of width and height that you have in your div.cara and manipulate your position bottom

.car {
  width: 100px;
  position: relative;
  height: 50px;
}

.cara {
  width: 10px;
  height: 20px;
  position: absolute;
  bottom: 20px;
  left: 0;
  background-color: black;
}

.Loader {
  width: 100px;
  height: 20px;
  background-color: red;
  position: absolute;
  bottom: 0;
}

.Back {
  width: 10px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 0;
  right: 0;
}

<div class="car">
  <div class="cara"></div>
  <div class="Back">
    <div id="topForm"></div>
    <div id="bottomForm"></div>
  </div>
  <div class="pala">
  </div>
  <div class="Loader">
  </div>

</div>