CSS Grid system for form










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






html css







share|improve this question






















  • why dont you try with bootstrap?

    – suzan
    Nov 15 '18 at 18:49











  • I think of Boostrap as a prototyping framework and not good for real world stuff

    – Jordan Baron
    Nov 15 '18 at 18:51











  • Nope, it is used in real world stuff everywhere and all the time.

    – dmikester1
    Nov 15 '18 at 18:52











  • its not a prototyping framework. Its the most popular front-end mobile-first framework

    – suzan
    Nov 15 '18 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.

    – Jordan Baron
    Nov 15 '18 at 18:57















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






html css







share|improve this question






















  • why dont you try with bootstrap?

    – suzan
    Nov 15 '18 at 18:49











  • I think of Boostrap as a prototyping framework and not good for real world stuff

    – Jordan Baron
    Nov 15 '18 at 18:51











  • Nope, it is used in real world stuff everywhere and all the time.

    – dmikester1
    Nov 15 '18 at 18:52











  • its not a prototyping framework. Its the most popular front-end mobile-first framework

    – suzan
    Nov 15 '18 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.

    – Jordan Baron
    Nov 15 '18 at 18:57













1












1








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






html css







share|improve this question














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






.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>





.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>





html css




html css






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 15 '18 at 18:44









Jordan BaronJordan Baron

6692715




6692715












  • why dont you try with bootstrap?

    – suzan
    Nov 15 '18 at 18:49











  • I think of Boostrap as a prototyping framework and not good for real world stuff

    – Jordan Baron
    Nov 15 '18 at 18:51











  • Nope, it is used in real world stuff everywhere and all the time.

    – dmikester1
    Nov 15 '18 at 18:52











  • its not a prototyping framework. Its the most popular front-end mobile-first framework

    – suzan
    Nov 15 '18 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.

    – Jordan Baron
    Nov 15 '18 at 18:57

















  • why dont you try with bootstrap?

    – suzan
    Nov 15 '18 at 18:49











  • I think of Boostrap as a prototyping framework and not good for real world stuff

    – Jordan Baron
    Nov 15 '18 at 18:51











  • Nope, it is used in real world stuff everywhere and all the time.

    – dmikester1
    Nov 15 '18 at 18:52











  • its not a prototyping framework. Its the most popular front-end mobile-first framework

    – suzan
    Nov 15 '18 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.

    – Jordan Baron
    Nov 15 '18 at 18:57
















why dont you try with bootstrap?

– suzan
Nov 15 '18 at 18:49





why dont you try with bootstrap?

– suzan
Nov 15 '18 at 18:49













I think of Boostrap as a prototyping framework and not good for real world stuff

– Jordan Baron
Nov 15 '18 at 18:51





I think of Boostrap as a prototyping framework and not good for real world stuff

– Jordan Baron
Nov 15 '18 at 18:51













Nope, it is used in real world stuff everywhere and all the time.

– dmikester1
Nov 15 '18 at 18:52





Nope, it is used in real world stuff everywhere and all the time.

– dmikester1
Nov 15 '18 at 18:52













its not a prototyping framework. Its the most popular front-end mobile-first framework

– suzan
Nov 15 '18 at 18:54





its not a prototyping framework. Its the most popular front-end mobile-first framework

– suzan
Nov 15 '18 at 18:54




1




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.

– Jordan Baron
Nov 15 '18 at 18:57





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.

– Jordan Baron
Nov 15 '18 at 18:57












4 Answers
4






active

oldest

votes


















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>








share|improve this answer






























    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>








    share|improve this answer


















    • 2





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

      – Chase Ingebritson
      Nov 15 '18 at 19:21


















    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>








    share|improve this answer























    • this doesn't look right either, in Chrome of FF

      – dmikester1
      Nov 15 '18 at 20:33


















    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>








    share|improve this answer

























    • this doesn't look right

      – dmikester1
      Nov 15 '18 at 19:24











    • Whoops, I see what you're talking about! Sorry about that, I'll adjust it.

      – Chase Ingebritson
      Nov 15 '18 at 19:30











    • Updated. It helps when the inputs listen to me.

      – Chase Ingebritson
      Nov 15 '18 at 19:31












    • input is still going past the text area

      – dmikester1
      Nov 15 '18 at 19:32











    • Hm, I'm not getting that. It may be a browser issue. Here's my view from Chrome.

      – Chase Ingebritson
      Nov 15 '18 at 19:53











    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326027%2fcss-grid-system-for-form%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    4 Answers
    4






    active

    oldest

    votes








    4 Answers
    4






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    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>








    share|improve this answer



























      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>








      share|improve this answer

























        3












        3








        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>








        share|improve this answer













        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>








        .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>





        .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>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 15 '18 at 19:04









        SuperDJSuperDJ

        4,13572647




        4,13572647























            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>








            share|improve this answer


















            • 2





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

              – Chase Ingebritson
              Nov 15 '18 at 19:21















            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>








            share|improve this answer


















            • 2





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

              – Chase Ingebritson
              Nov 15 '18 at 19:21













            2












            2








            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>








            share|improve this answer













            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>








            * 
             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>





            * 
             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>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 15 '18 at 19:18









            aCMoFoCordaCMoFoCord

            813




            813







            • 2





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

              – Chase Ingebritson
              Nov 15 '18 at 19:21












            • 2





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

              – Chase Ingebritson
              Nov 15 '18 at 19:21







            2




            2





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

            – Chase Ingebritson
            Nov 15 '18 at 19:21





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

            – Chase Ingebritson
            Nov 15 '18 at 19:21











            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>








            share|improve this answer























            • this doesn't look right either, in Chrome of FF

              – dmikester1
              Nov 15 '18 at 20:33















            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>








            share|improve this answer























            • this doesn't look right either, in Chrome of FF

              – dmikester1
              Nov 15 '18 at 20:33













            0












            0








            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>








            share|improve this answer













            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>








            .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>





            .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>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 15 '18 at 19:20









            Jean-Philippe BergeronJean-Philippe Bergeron

            72111




            72111












            • this doesn't look right either, in Chrome of FF

              – dmikester1
              Nov 15 '18 at 20:33

















            • this doesn't look right either, in Chrome of FF

              – dmikester1
              Nov 15 '18 at 20:33
















            this doesn't look right either, in Chrome of FF

            – dmikester1
            Nov 15 '18 at 20:33





            this doesn't look right either, in Chrome of FF

            – dmikester1
            Nov 15 '18 at 20:33











            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>








            share|improve this answer

























            • this doesn't look right

              – dmikester1
              Nov 15 '18 at 19:24











            • Whoops, I see what you're talking about! Sorry about that, I'll adjust it.

              – Chase Ingebritson
              Nov 15 '18 at 19:30











            • Updated. It helps when the inputs listen to me.

              – Chase Ingebritson
              Nov 15 '18 at 19:31












            • input is still going past the text area

              – dmikester1
              Nov 15 '18 at 19:32











            • Hm, I'm not getting that. It may be a browser issue. Here's my view from Chrome.

              – Chase Ingebritson
              Nov 15 '18 at 19:53
















            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>








            share|improve this answer

























            • this doesn't look right

              – dmikester1
              Nov 15 '18 at 19:24











            • Whoops, I see what you're talking about! Sorry about that, I'll adjust it.

              – Chase Ingebritson
              Nov 15 '18 at 19:30











            • Updated. It helps when the inputs listen to me.

              – Chase Ingebritson
              Nov 15 '18 at 19:31












            • input is still going past the text area

              – dmikester1
              Nov 15 '18 at 19:32











            • Hm, I'm not getting that. It may be a browser issue. Here's my view from Chrome.

              – Chase Ingebritson
              Nov 15 '18 at 19:53














            0












            0








            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>








            share|improve this answer















            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>








            /* 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>





            /* 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>






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Nov 15 '18 at 20:19

























            answered Nov 15 '18 at 19:14









            Chase IngebritsonChase Ingebritson

            878722




            878722












            • this doesn't look right

              – dmikester1
              Nov 15 '18 at 19:24











            • Whoops, I see what you're talking about! Sorry about that, I'll adjust it.

              – Chase Ingebritson
              Nov 15 '18 at 19:30











            • Updated. It helps when the inputs listen to me.

              – Chase Ingebritson
              Nov 15 '18 at 19:31












            • input is still going past the text area

              – dmikester1
              Nov 15 '18 at 19:32











            • Hm, I'm not getting that. It may be a browser issue. Here's my view from Chrome.

              – Chase Ingebritson
              Nov 15 '18 at 19:53


















            • this doesn't look right

              – dmikester1
              Nov 15 '18 at 19:24











            • Whoops, I see what you're talking about! Sorry about that, I'll adjust it.

              – Chase Ingebritson
              Nov 15 '18 at 19:30











            • Updated. It helps when the inputs listen to me.

              – Chase Ingebritson
              Nov 15 '18 at 19:31












            • input is still going past the text area

              – dmikester1
              Nov 15 '18 at 19:32











            • Hm, I'm not getting that. It may be a browser issue. Here's my view from Chrome.

              – Chase Ingebritson
              Nov 15 '18 at 19:53

















            this doesn't look right

            – dmikester1
            Nov 15 '18 at 19:24





            this doesn't look right

            – dmikester1
            Nov 15 '18 at 19:24













            Whoops, I see what you're talking about! Sorry about that, I'll adjust it.

            – Chase Ingebritson
            Nov 15 '18 at 19:30





            Whoops, I see what you're talking about! Sorry about that, I'll adjust it.

            – Chase Ingebritson
            Nov 15 '18 at 19:30













            Updated. It helps when the inputs listen to me.

            – Chase Ingebritson
            Nov 15 '18 at 19:31






            Updated. It helps when the inputs listen to me.

            – Chase Ingebritson
            Nov 15 '18 at 19:31














            input is still going past the text area

            – dmikester1
            Nov 15 '18 at 19:32





            input is still going past the text area

            – dmikester1
            Nov 15 '18 at 19:32













            Hm, I'm not getting that. It may be a browser issue. Here's my view from Chrome.

            – Chase Ingebritson
            Nov 15 '18 at 19:53






            Hm, I'm not getting that. It may be a browser issue. Here's my view from Chrome.

            – Chase Ingebritson
            Nov 15 '18 at 19:53


















            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326027%2fcss-grid-system-for-form%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            這個網誌中的熱門文章

            How to read a connectionString WITH PROVIDER in .NET Core?

            圖片
            6 I added .AddJsonFile("Connections.json", optional: true, reloadOnChange: true) in public Startup(IHostingEnvironment env) Connections.json contains: "ConnectionStrings": "DefaultConnection": "Server=(localdb)\mssqllocaldb;Database=DATABASE;Trusted_Connection=True;MultipleActiveResultSets=true", "COR-W81-101": "Data Source=DATASOURCE;Initial Catalog=P61_CAFM_Basic;User Id=USERID;Password=PASSWORD;Persist Security Info=False;MultipleActiveResultSets=False;Packet Size=4096;", "COR-W81-100": "Data Source=DATASOURCE;Initial Catalog=Post_PS;User Id=USERID;Password=PASSWORD;Persist Security Info=False;MultipleActiveResultSets=False;Packet Size=4096;", "MSEDGEWIN10": "Data Source=DATASOURCE; Initial Catalog=COR_Basic; Persist Security Info=False;Integrated Security=true;MultipleActiveResultSets=False;Packet Size=4096;Application Name="COR_Basic"", "server...
            閱讀完整內容

            Node.js Script on GitHub Pages or Amazon S3

            圖片
            0 I'm wondering if I can run a Node.js script in my Jekyll page from GitHub Pages or Amazon S3? I think it can't run on GitHub Pages since it doesn't support server side code. Not too sure. The code is below: var Airtable = require('airtable'); var base = new Airtable(apiKey: 'YOUR_API_KEY').base('appAnZVyYqusNPV5Q'); base('Invitee list').select( // Selecting the first 3 records in Complete list: maxRecords: 3, view: "Complete list" ).eachPage(function page(records, fetchNextPage) // This function (`page`) will get called for each page of records. records.forEach(function(record) console.log('Retrieved', record.get('Email')); ); // To fetch the next page of records, call `fetchNextPage`. // If there are more records, `page` will get called again. // If there are no more records, `done` will get called. fetchNextPage(); , function done(err) if (err) console.error(err); return; ); node.js ...
            閱讀完整內容

            Museum of Modern and Contemporary Art of Trento and Rovereto

            圖片
            Art museum in Rovereto TN, Italy Museum of Modern and Contemporary Art of Trento and Rovereto Museo d'arte moderna e contemporanea di Trento e Rovereto MART, Entrance Location Corso Angelo Bettini, 43, 38068 Rovereto TN, Italy Coordinates 45°53′38″N 11°02′42″E  /  45.8940°N 11.0450°E  / 45.8940; 11.0450 Coordinates: 45°53′38″N 11°02′42″E  /  45.8940°N 11.0450°E  / 45.8940; 11.0450 Type Art museum Director Gianfranco Maraniello Public transit access Trento train station. Taxis outside station. Website mart.trento.it The Museum of Modern and Contemporary Art of Trento and Rovereto (MART) ( Museo d'Arte Moderna e Contemporanea di Trento e Rovereto , in Italian) is a museum centre in the Italian province of Trento. The main site is in Rovereto, and contains mostly modern and contemporary artworks, including works from renowned Giorgio Morandi, Giorgio de...
            閱讀完整內容