CODEWITHSUNDEEP
htmlcss
user9225102
user9225102

Reputation:

How to move an element in next line?

How do I make the button stay under the text? If I do a <br> the button goes outside the div. Why?

.dropzone {
    border: 2px dashed #ccc;
    width: 100%;
    height: 200px;
    color: #ccc;
    text-align: center;
    line-height: 200px;
}
<div class="dropzone" id="dropzone">
  <span>Drag and drop a file or</span>
  <input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
  <label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>

Upvotes: 1

Views: 3955

Answers (5)

corv
corv

Reputation: 31

Your use of line-height is what's pushing the button outside of the div when you insert a <br> after your text. I suggest removing it if you want to use the line break, as well as looking into flexbox or padding properties if you want to vertically align your div contents.

For example:

.dropzone {
  border: 2px dashed #ccc;
  width: 100%;
  height: 200px;
  padding: 10px;
  color: #ccc;
  text-align: center;
  /*     line-height: 200px; */
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<div class="dropzone" id="dropzone">
  <span>Drag and drop a file or</span> 
  <span>
    <input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
    <label for="fileUpload" class="btn btn-primary-outline">Select file</label>
  </span>
</div>

Upvotes: 1

Muhammad Bilal
Muhammad Bilal

Reputation: 3008

Added some css and br tag

.dropzone {
    border: 2px dashed #ccc;
    max-width: 100%;
    color: #ccc;
    padding: 50px;
    text-align: left;
}
.dropzone span{
    margin-bottom:5px;
    display:inline-block;
}
<div class="dropzone" id="dropzone">
<span>Drag and drop a file or</span><br>
<input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
<label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>

Upvotes: 1

Quantum_Code
Quantum_Code

Reputation: 7

Try This:

.button {
  display: block;
}

This should position the button under the element behind it.

Upvotes: 1

Scath
Scath

Reputation: 3824

If you remove the line-height:200px; it will not push the button down 200px. You can use a <p> tag instead of span and it will move the text under without needing the <br>. 

.dropzone {
    border: 2px dashed #ccc;
    max-width: 100%;   
    color: #ccc;
    padding: 50px;
    text-align: center;
}
<div class="dropzone" id="dropzone">
  <p>Drag and drop a file or</p>
  <input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
  <label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>

Upvotes: 1

Julien Ambos
Julien Ambos

Reputation: 2088

The input went outside of the div when you inserted a <br> tag, because you set the line height to 200px. A <br> represents a new line, apparently with a spacing of 200px to other lines. The following code displays the button under the <span>:

.dropzone {
    border: 2px dashed #ccc;
    max-width: 100%;
    color: #ccc;
    padding: 50px;
    text-align: center;
}
<div class="dropzone" id="dropzone">
  <span>Drag and drop a file or</span><br>
  <input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
  <label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>

Upvotes: 2

Related Questions