1

I have a form that and I want the two input tags on top and the textarea on bottom. I have the following currently

.uploadFile { margin: 0 auto; width: 50%; } .uploadForm { padding: 10px; } .uploadForm>button { float: right; }
<div class="uploadFile"> <form action="includes/upload.inc.php" method="POST" class="uploadForm"> <!-- <input type="file" name="file"> --> <input type="text" name="software-name" id="software-name"> <input type="text" name="filename" placeholder="File name on DigitalOcean Space"> <textarea name="software-description" id="software-desc" cols="30" rows="10"></textarea> <button type="submit">Upload</button> </form> </div>

To better understand what I'm trying to do, here's a really bad illustration.

illustration

Improve this question
7
  • why dont you try with bootstrap? Commented Nov 15, 2018 at 18:49
  • I think of Boostrap as a prototyping framework and not good for real world stuff Commented Nov 15, 2018 at 18:51
  • Nope, it is used in real world stuff everywhere and all the time. Commented Nov 15, 2018 at 18:52
  • its not a prototyping framework. Its the most popular front-end mobile-first framework Commented Nov 15, 2018 at 18:54
  • 1
    I never said it waas a prototyping framework, I said I think of it as one. If it helps for you to understand, I don't want to use Bootstrap. I could care less if it's used all the time. I don't want to use it. Commented Nov 15, 2018 at 18:57

4 Answers 4

Reset to default
3

Here is a start. For the documentation have a look at: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

.uploadFile { margin: 0 auto; width: 50%; } .uploadForm { padding: 10px; display: grid; grid-template-columns: repeat(2, 50%); grid-gap: 10px; } .uploadForm>button { float: right; grid-column-start: 2; } textarea, input { width: 100%; } textarea { grid-column-start: span 2 }
<div class="uploadFile"> <form action="includes/upload.inc.php" method="POST" class="uploadForm"> <!-- <input type="file" name="file"> --> <input type="text" name="software-name" id="software-name"> <input type="text" name="filename" placeholder="File name on DigitalOcean Space"> <textarea name="software-description" id="software-desc"></textarea> <button type="submit">Upload</button> </form> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

I would use css grid if that is an option as @SuperDJ demonstrated. This is an alternative solution using floats.

* { box-sizing:border-box; } .uploadFile { margin: 0 auto; width: 50%; } .uploadForm { padding: 10px; } .uploadForm>button { float: right; margin:10px 0 0 0; } #software-name, #software-file { width:calc(50% - 5px); float:left; margin:0 0 10px 0; } #software-name { margin-right:5px; } #software-file { margin-left:5px; } #software-desc { width:100%; }
<div class="uploadFile"> <form action="includes/upload.inc.php" method="POST" class="uploadForm"> <!-- <input type="file" name="file"> --> <input type="text" name="software-name" id="software-name"> <input type="text" name="filename" id="software-file" placeholder="File name on DigitalOcean Space"> <textarea name="software-description" id="software-desc" cols="30" rows="10"></textarea> <button type="submit">Upload</button> </form> </div>

Improve this answer

1 Comment

Now we just need a display: table answer and we'll have the 4 horsemen of the CSS apocalypse.
0

Not using Bootstrap is a pain tbh, but here's how you can do it without it.

.uploadFile { margin: 0 auto; width: 50%; } .uploadForm { padding: 10px; } .uploadForm>button { float: right; } .desc { width: 100%; } .form-group { display: inline-block; width: 100%; padding: 0 !important; }
<div class="uploadFile"> <form action="includes/upload.inc.php" method="POST" class="uploadForm"> <!-- <input type="file" name="file"> --> <div class="form-group"> <input class="name" type="text" name="software-name" id="software-name"> <input class="file" type="text" name="filename" placeholder="File name on DigitalOcean Space"> </div> <textarea class="desc" name="software-description" id="software-desc" cols="30" rows="10"></textarea> <button class="submit" type="submit">Upload</button> </form> </div>

Improve this answer

Comments

0

To expand upon SuperDJ's answer, you can also use Flexbox to achieve this formatting. To decide which one to use in your particular situation, you should read up on the differences between the two as they are similar, but still different.

Edit: This is just an example and may not work perfectly as is in all browsers. Make sure you implement any fallbacks and vendor prefixes that need to be implemented.

/* New styles */ .row { display: flex; } .row-reverse { justify-content: flex-end; } .cell { flex-grow: 1; width: 100%; } /* Pre-existing styles */ .uploadFile { margin: 0 auto; width: 50%; } .uploadForm { padding: 10px; }
<div class="uploadFile"> <form action="includes/upload.inc.php" method="POST" class="uploadForm"> <!-- <input type="file" name="file"> --> <div class="row"> <input type="text" name="software-name" id="software-name" class="cell"> <input type="text" name="filename" placeholder="File name on DigitalOcean Space" class="cell"> </div> <div class="row"> <textarea name="software-description" id="software-desc" cols="30" rows="10" class="cell"></textarea> </div> <div class="row row-reverse"> <button type="submit">Upload</button> </div> </form> </div>

Improve this answer

5 Comments

Whoops, I see what you're talking about! Sorry about that, I'll adjust it.
Updated. It helps when the inputs listen to me.
input is still going past the text area
Hm, I'm not getting that. It may be a browser issue. Here's my view from Chrome.
Must be, I'm in FF.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.