I need assistance in creating a form that adjusts its width based on the form fields. The form contains both explanatory text and input fields, each enclosed in a div with inline-block set.
The outer div (also using inline-block) should not expand beyond the necessary width of the form fields. This should remain true even if the explanatory text is wider than the input fields.
- During design, I am unaware of the width of the widest form field
- The width of the form fields can change after the form is displayed
- I prefer a CSS-only solution without JavaScript
- The #outer or any other div should not have a fixed width
To visualize my issue, here is a link to my fiddle: http://jsfiddle.net/SuperNova3000/PqJk6/
Markup
<div id="outer">
<div class="text">
Explaining Text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="field">
<label for="text1">Edit #1</label>
<input type="text" size="25" id="text1" />
</div>
<div class="text">
Some more text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<div class="field">
<label for="text2">Edit #2</label>
<input type="text" size="35" id="text2" />
</div>
</div>
Styling
div { display: inline-block; padding: 10px; }
#outer { border: black 10px solid; }
.text { background-color: red; }
.field { background-color: green; }
Current Display
Desired Look
If anyone knows how to achieve the desired appearance, please share your insights. Thank you!