https://legacy.forums.gravityhelp.com/topic/horizontal-form-layout Gravity Support Forums Topic: Horizontal form layout en-US Mon, 20 Apr 2026 10:02:58 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/horizontal-form-layout#post-2161 Sun, 13 Dec 2009 11:43:12 +0000 Kevin Flahaut 2161@https://legacy.forums.gravityhelp.com/ <p>Great. I'm glad it worked for you. Thanks for the update. </p> https://legacy.forums.gravityhelp.com/topic/horizontal-form-layout#post-2160 Sun, 13 Dec 2009 02:52:46 +0000 walt 2160@https://legacy.forums.gravityhelp.com/ <p>Thanks for the prompt response. It seems to work fine when I use the css below: </p> <pre><code>li#field_2_15, li#field_2_17 {width:55%; float:left} li#field_2_3 {clear:both} input#input_2_15, input#input_2_17 {width:296px;} input#input_2_16, input#input_2_18 {width:200px;}</code></pre> <p>Thanks again,<br /> Walt </p> https://legacy.forums.gravityhelp.com/topic/horizontal-form-layout#post-2158 Sat, 12 Dec 2009 23:32:57 +0000 Kevin Flahaut 2158@https://legacy.forums.gravityhelp.com/ <p>you're headed in the right direction.. just need to float the first &lt; li &gt; left and let the next one automatically wrap to the right of it. I put a css snippet up on a previous post that worked fine in all the browsers.</p> <p><a href="http://forum.gravityhelp.com/topic/data-fields-in-same-row#post-878" rel="nofollow">http://forum.gravityhelp.com/topic/data-fields-in-same-row#post-878</a></p> <p>You can target the input fields directly by using their id as in the example below.</p> <pre><code>input#input_2_15 {width:230px;} input#input_2_17 {width:250px;}</code></pre> <p>I plan to add some styling tutorials and examples after the first of the year. Thanks for the feedback. </p> https://legacy.forums.gravityhelp.com/topic/horizontal-form-layout#post-2152 Sat, 12 Dec 2009 17:39:52 +0000 walt 2152@https://legacy.forums.gravityhelp.com/ <p>Currently I'm working on a form with, on a few lines, 2 single line text fields next to each other. </p> <p>To position the two 2 single line text fields on the same line I'm using the following css:</p> <pre><code>/*left section*/ #field_2_3, #field_2_4, #field_2_8,#field_2_15,#field_2_17{ float: left; width: 45%; clear: both; } /*right section*/ #field_2_16,#field_2_18{ float: left; width: 45%; } .button{ float: left; width: 100px; margin: 15px 0px 0px 0px; clear: both; }</code></pre> <p>an example can be seen here: </p> <p><a href="http://dev.villageocelandes.fr/huren" rel="nofollow">http://dev.villageocelandes.fr/huren</a></p> <p>I have the following questions: </p> <p>1. the css I'm using seems not to work well with IE7. How can this be fixed?<br /> 2. How can I expand some of the input fields? Now they all the same size. </p> <p>Also suggestions for a different css approach are more than welcome. It would be nice to have a video tutorial on how to position 2 or more fields on the same line. </p> <p>Thanks,<br /> Walt </p>