Cannot arrange divs one below the other

Question

I am trying to arrange my <div>s one below the other but they still end up on the same line, I tried using row and col approach but still it's not working, Answers on SO also didn't work.

Currently my code is like this

.dragAndDropBox{
    position: absolute;
    width: 80%;
    height: 100%;
    border: 1px solid #fff;
    background-color: gainsboro;
    border-radius: 5px;
}

.dragAndDropBox:hover{
    position: absolute;
    width: 80%;
    height: 100%;
    border: 1px solid #fff;
    background-color: gray;
    border-radius: 5px;
}

.dragAndDropBox .dragAndDropUpload{
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
}


.dragAndDropBox .dragAndDropProgressBar{
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 10%;
    outline: none;
}

.dragAndDropBox .dragAndDropText{
    padding-top: 2%;
    text-align: center;
    line-height: 1rem;
    color: #3b3b3b;
    font-family: Arial
}

<div class="uploadBox w-100">
    <div class="uploadDropBox">
        <div class="dragAndDropBox">
            <input
                accept="image/*"
                class="dragAndDropUpload"
                type="file"
            />
            <div class="dragAndDropText">Drag / Browse</div>
            <div
                bsstyle="success"
                class="dragAndDropProgressBar mt-1 progress">
                <div
                    role="progressbar"
                    class="progress-bar progress-bar-striped"
                    style="width: 0%;"
                    aria-valuenow="0"
                    aria-valuemin="0"
                    aria-valuemax="100"
                />
            </div>
        </div>
    </div>
    <div class="uploadedBox w-100">
        <div>Filename Delete View</div>
    </div>
</div>

I am using Bootstrap 4.3.1

I think you should change the position absolute to relative. — jitu thakur, Apr 25 '19 at 11:41

score 1 · Answer 1 · answered Apr 25 '19 at 11:38

1

Use <br> as a line break (end-of-line).

answered Apr 25 '19 at 11:38

Ethan Arnold

134
1
10

score 1 · Accepted Answer · answered Apr 25 '19 at 11:48

The <div>s have position: absolute which puts them on top of each other.

I would suggest adding position: relative to .dragAndDropBox so all the absolutely positioned elements have a relative element to refer to.

Here's the fiddle: https://jsfiddle.net/yjdkne3b/

.dragAndDropBox {
  position: relative;
  width: 80%;
  height: 200px;
  border: 1px solid #fff;
  background-color: gainsboro;
  border-radius: 5px;
}

.dragAndDropBox:hover {
  background-color: gray;
}

.dragAndDropBox .dragAndDropUpload {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
}

.dragAndDropBox .dragAndDropProgressBar {
  position: absolute;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  max-height: 10%;
  outline: none;
}

.dragAndDropBox .dragAndDropText {
  padding-top: 2%;
  text-align: center;
  line-height: 1rem;
  color: #3b3b3b;
}

<div class="uploadBox w-100">
  <div class="uploadDropBox">
    <div class="dragAndDropBox">
      <input accept="image/*" class="dragAndDropUpload" type="file" />
      <div class="dragAndDropText">Drag / Browse</div>
      <div bsstyle="success" class="dragAndDropProgressBar mt-1 progress">
        <div role="progressbar" class="progress-bar progress-bar-striped" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" />
      </div>
    </div>
  </div>
  <div class="uploadedBox w-100">
    <div>Filename Delete View</div>
  </div>
</div>

I hope this is the solution you are looking for.

Also, you don't have to repeat the properties from the element on hover. If only the background changes on hover it's ok to change just that and the other properties will remain the same. :)

score 1 · Answer 3 · answered Apr 25 '19 at 11:50

1

I think it is because of the "position: absolute" in your CSS. This makes block elements only use as much space as they need. You can read more about this here: Does adding a position: absolute to a block element make it behave like an inline?

answered Apr 25 '19 at 11:50

Chrissu

382
1
13

Cannot arrange divs one below the other

3 Answers3