CSS Responsive HTML forms - html

Question

I have this HTML Code:
<h4>Company Details</h4>
<div>
<label for="company">Company</label>
<div>
<input type="text" name="company" value="<?php echo $customer["company"]; ?>" />
</div>
</div>
I would like to have the text inputs and labels displaying inline with each other then as the screen gets smaller to move the text inputs under the labels

Answer 1

There are many ways to achieve this. Chose the one that fits your project the best. I would set the label and the div containing the input as "inline" or "inline-block" using CSS. Then if you need then line to collapse into two, use media queries (see the last code snippet).
<h4>Company Details</h4>
<div class="input-group">
<label for="company">Company</label>
<div>
<input type="text" name="company" value="<?php echo $customer["company"]; ?>" />
</div>
</div>
// This will make them show inline occupying half the width
.input-group > label, .input-group > div{
display: inline-block;
width: 50%;
}
I sometimes have problems with extra pixels in inline-blocks,
and I typically solve it by floating the blocks or setting the
font size to zero.
// This way the label and input float
.input-group {
clear: both; // So the container doesn't collapse
}
.input-group > label, .input-group > div{
float: left;
width: 50%;
}
For the font size version:
// This way the font size in the container is zero
.input-group {
font-size: 0;
}
.input-group > label, .input-group > div{
display: inline-block;
width: 50%;
font-size: 12px;
}
Your div will automatically stretch to 100% of the screen, so You don't need media queries to set its width; it's already responsive as is. But if you insist on using them, or need them, add this as well:
#media (max-width: 500px) {
.input-group > label, .input-group > div{
display: block;
float: none;
}
}

Answer 2

It's pretty easy to achieve. Simply set:
.inputLine label, .inputLine div {
display: inline;
}
With the HTML being:
<h4>Company Details</h4>
<div class="inputLine">
<label for="company">Company</label>
<div>
<input type="text" name="company" value="My Company" />
</div>
</div>
Working example:
http://jsfiddle.net/wLjekogo/
Updated: april 20th, 2015
To achieve the requested output, while allowing multiple inline elements. You could use the following HTML/CSS combination:
HTML
<h4>Company Details</h4>
<div class="inputLine">
<label for="company">Company</label>
<input type="text" name="company" value="My Company" />
</div>
<div class="inputLine">
<label for="company">Company</label>
<input type="text" name="company" value="My Company" />
</div>
CSS
.inputLine {
display: inline-block;
}
.inputLine label {
display: inline-block;
max-width: "100%";
}
.inputLine input {
display: inline-block;
width: auto;
}
This would show all input fields inline, unless the screen is too small. In which case first the divs will be on a new line, and even more smaller, a vertical form.
Example:
http://jsfiddle.net/wLjekogo/2/