How to style this form using CSS? - html

Question

i'm a beginner at CSS and trying to do a NETTUTS , but there's a portion in the webpage that i don't know what exactly to do in CSS to make it look right ...
I just can't get this input text boxes, textarea and the button to be aligned like that , and to be honest the tutor isn't doing a great job to clearing stuff out
Using alternative and absolute positioning, and setting top and right spacing is kinda no a good idea i think ... I'm trying to align them using FlexBox feature but don't know why those elements are not moving at all ...
Here's my HTML & CSS3 code (for chrome) :
<section id="getAfreeQuote">
<h2>GET A FREE QUOTE</h2>
<form method="post" action="#">
<input type="text" name="yourName" placeholder="YOUR NAME"/>
<input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
<textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
<input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
<button>Submit</button>
</form>
#getAfreeQuote form {
display:-webkit-box;
-webkit-box-orient:vertical;
height:500px;
}
#getAfreeQuote input[name="yourName"]{
-webkit-box-ordinal-group:1;
}
#getAfreeQuote input[name="yourEmail"]{
-webkit-box-ordinal-group:1;
}
#getAfreeQuote textarea{
-webkit-box-ordinal-group:2;
}
#getAfreeQuote input[name="timeScale"]{
-webkit-box-ordinal-group:3;
}
#getAfreeQuote button {
-webkit-box-ordinal-group:4;
}
and the result :

Answer 1

Here's how I'd do it:
<section id="getAfreeQuote">
<form method="post" action="#">
<h2>Get a free quote</h2>
<input type="text" name="yourName" placeholder="YOUR NAME"/>
<input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
<textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
<br /><input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
<br /><input type="submit" value="Submit!" />
<div class="clear"></div>
</form>
</section>
<style>
#getAfreeQuote h2 {
text-transform: uppercase;
color: blue;
}
div.clear {
clear: both;
}
#getAfreeQuote form {
width: 25em;
position: relative;
}
#getAfreeQuote input[name="yourName"]{
width: 43%;
}
#getAfreeQuote input[name="yourEmail"]{
width: 55%;
float: right;
}
#getAfreeQuote textarea{
width: 100%;
height: 10em;
}
#getAfreeQuote input[name="timeScale"]{
width: 100%;
}
#getAfreeQuote input[type="submit"]{
text-transform: uppercase;
background: orange;
border: none;
padding: 1em 2em;
color: white;
float: right;
}
</style>

Answer 2

You have a good start, but you need to know the basics of CSS layout properties. A good start would be to learn the basics from Sitepoint where a very useful guide is present. Good luck.

Answer 3

If you do not have to use a FlexBox you can use width: 50% for the top two text inputs and width: 100% for the textarea and bottom text input. After setting the form with to the desired width of the form