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.
html css
asked Nov 15 '18 at 18:44
Jordan BaronJordan Baron
6692715
|
show 2 more comments
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.
html css
asked Nov 15 '18 at 18:44
Jordan BaronJordan Baron
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
|
show 2 more comments
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.
html css
asked Nov 15 '18 at 18:44
Jordan BaronJordan Baron
6692715
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.
.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
asked Nov 15 '18 at 18:44
Jordan BaronJordan Baron
6692715
asked Nov 15 '18 at 18:44
Jordan BaronJordan Baron
6692715
asked Nov 15 '18 at 18:44
Jordan BaronJordan Baron
6692715
asked Nov 15 '18 at 18:44
Jordan BaronJordan Baron
6692715
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
|
show 2 more comments
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
|
show 2 more comments
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>answered Nov 15 '18 at 19:04
SuperDJSuperDJ
4,13572647
add a comment |
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>answered Nov 15 '18 at 19:18
aCMoFoCordaCMoFoCord
813
2
Now we just need adisplay: tableanswer and we'll have the 4 horsemen of the CSS apocalypse.
– Chase Ingebritson
Nov 15 '18 at 19:21
add a comment |
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>answered Nov 15 '18 at 19:20
Jean-Philippe BergeronJean-Philippe Bergeron
72111
this doesn't look right either, in Chrome of FF
– dmikester1
Nov 15 '18 at 20:33
add a comment |
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>answered Nov 15 '18 at 19:14
Chase IngebritsonChase Ingebritson
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 theinputs 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
|
show 1 more comment
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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>answered Nov 15 '18 at 19:04
SuperDJSuperDJ
4,13572647
add a comment |
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>answered Nov 15 '18 at 19:04
SuperDJSuperDJ
4,13572647
add a comment |
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>answered Nov 15 '18 at 19:04
SuperDJSuperDJ
4,13572647
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>answered Nov 15 '18 at 19:04
SuperDJSuperDJ
4,13572647
answered Nov 15 '18 at 19:04
SuperDJSuperDJ
4,13572647
answered Nov 15 '18 at 19:04
SuperDJSuperDJ
4,13572647
answered Nov 15 '18 at 19:04
SuperDJSuperDJ
4,13572647
4,13572647
add a comment |
add a comment |
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>answered Nov 15 '18 at 19:18
aCMoFoCordaCMoFoCord
813
2
Now we just need adisplay: tableanswer and we'll have the 4 horsemen of the CSS apocalypse.
– Chase Ingebritson
Nov 15 '18 at 19:21
add a comment |
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>answered Nov 15 '18 at 19:18
aCMoFoCordaCMoFoCord
813
2
Now we just need adisplay: tableanswer and we'll have the 4 horsemen of the CSS apocalypse.
– Chase Ingebritson
Nov 15 '18 at 19:21
add a comment |
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>answered Nov 15 '18 at 19:18
aCMoFoCordaCMoFoCord
813
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>answered Nov 15 '18 at 19:18
aCMoFoCordaCMoFoCord
813
answered Nov 15 '18 at 19:18
aCMoFoCordaCMoFoCord
813
answered Nov 15 '18 at 19:18
aCMoFoCordaCMoFoCord
813
answered Nov 15 '18 at 19:18
aCMoFoCordaCMoFoCord
813
813
2
Now we just need adisplay: tableanswer and we'll have the 4 horsemen of the CSS apocalypse.
– Chase Ingebritson
Nov 15 '18 at 19:21
add a comment |
2
Now we just need adisplay: tableanswer 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
add a comment |
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>answered Nov 15 '18 at 19:20
Jean-Philippe BergeronJean-Philippe Bergeron
72111
this doesn't look right either, in Chrome of FF
– dmikester1
Nov 15 '18 at 20:33
add a comment |
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>answered Nov 15 '18 at 19:20
Jean-Philippe BergeronJean-Philippe Bergeron
72111
this doesn't look right either, in Chrome of FF
– dmikester1
Nov 15 '18 at 20:33
add a comment |
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>answered Nov 15 '18 at 19:20
Jean-Philippe BergeronJean-Philippe Bergeron
72111
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>answered Nov 15 '18 at 19:20
Jean-Philippe BergeronJean-Philippe Bergeron
72111
answered Nov 15 '18 at 19:20
Jean-Philippe BergeronJean-Philippe Bergeron
72111
answered Nov 15 '18 at 19:20
Jean-Philippe BergeronJean-Philippe Bergeron
72111
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
add a comment |
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
add a comment |
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>answered Nov 15 '18 at 19:14
Chase IngebritsonChase Ingebritson
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 theinputs 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
|
show 1 more comment
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>answered Nov 15 '18 at 19:14
Chase IngebritsonChase Ingebritson
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 theinputs 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
|
show 1 more comment
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>answered Nov 15 '18 at 19:14
Chase IngebritsonChase Ingebritson
878722
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>answered Nov 15 '18 at 19:14
Chase IngebritsonChase Ingebritson
878722
edited Nov 15 '18 at 20:19
answered Nov 15 '18 at 19:14
Chase IngebritsonChase Ingebritson
878722
answered Nov 15 '18 at 19:14
Chase IngebritsonChase Ingebritson
878722
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 theinputs 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
|
show 1 more comment
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 theinputs 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
|
show 1 more comment
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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