html: have form adjust width to contents? - html

Question

please have a look at this simple jsfiddle:
--> JSFiddle
html:
<form>
<p>
<input id="I1" value="above left" size="40" />
<input id="I2" value="above right" size="10" />
</p>
<p>
<input id="I3" value="below right" size="10" />
<input id="I4" value="below left" size="20" />
</p>
</form>
css:
form {
overflow: hidden;
border: 3px solid red;
padding: 5px;
}
#I1,
#I2 {
background-color: orange;
float: left;
}
#I3,
#I4 {
background-color: yellow;
float: right;
}
what I want is the red border (= form width) auto-adjust to the width of the two top inputs (+ padding, of course).
I would then expect, that the second line inputs appear right-aligned below the first, so "above right" would be exactly above "below right", and "below left" beeing right left of it, like so:
11111111111111111111 2222222
4444444 3333333
Can this be done without tables?
Thx, Armin.

Answer 1

It most certainly can be done without tables :). You could set, for form:
form {
display: inline-block;
padding: ...;
}
This will prevent the form from expanding to the entire width of the screen. It will be as wide as the elements inside it, or, if you manually define its width, as wide as specified.
If you would like no elements to appear on either side of the form within the form's containing element, you can wrap it in a div or other block level element:
<div>
<form>
<!-- Rest of content -->
</form>
</div>
In order to remove the spacing above and below each p, as per your comment, remove their margin-top and margin-bottom, as they have a margin by default:
p {
margin-bottom: 0;
margin-top: 0;
}

Answer 2

I've organized and cleaned-up your code. The way to make the div adjust to its content is by using display: inline-block. I've also fixed the padding issue so now the entire content is padded equally to 5px.
JsFiddle
HTML:
<form>
<p>
<input id="I1" value="above left" size="40" />
<input id="I2" value="above right" size="10" />
</p>
<p>
<input id="I3" value="below right" size="10" />
<input id="I4" value="below left" size="20" />
</p>
</form>
CSS:
.border {
border: 3px solid red;
padding: 5px;
display: inline-block;
}
#I1 {
background-color: orange;
}
#I2 {
background-color: yellow;
}
.top-block,
.bottom-block {
width: 100%;
}

Answer 3

I have update this answer. Probably this is what you need, but there are other options but I don't think is the scope of this question.
CSS Code:
form {
overflow: hidden;
border: 3px solid red;
padding: 5px;
width: 400px; // limites de form size
}
#I1,
#I2 {
position: absolute;
background-color: orange;
}
#I3,
#I4 {
position: absolute;
background-color: yellow;
}
p {
display: block;
border: 1px solid blue;
position: relative;
height: 2em;
}
#I1,
#I4 {
right: 25%;
}
#I2,
#I3 {
right: 0;
}
See here the full code: https://jsfiddle.net/uv8yrrav/18/
hope this helps!