https://legacy.forums.gravityhelp.com/topic/float-fields-leftright Gravity Support Forums Topic: Float fields (left/right) en-US Mon, 20 Apr 2026 05:23:00 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/float-fields-leftright#post-6200 Wed, 09 Jun 2010 09:45:15 +0000 Kevin Flahaut 6200@https://legacy.forums.gravityhelp.com/ <p>Wonderful! I'm glad that worked for you. Let us know if you need anything else. </p> https://legacy.forums.gravityhelp.com/topic/float-fields-leftright#post-6199 Wed, 09 Jun 2010 09:42:07 +0000 Striker22uk 6199@https://legacy.forums.gravityhelp.com/ <p>Kevin,</p> <p>Thanks a lot for that, that works exactly as I wanted.</p> <p>I had played with absolute positioning but neglected to make the wrapper relative so thanks for pointing that out. </p> <p>I'll get there in the end :) </p> https://legacy.forums.gravityhelp.com/topic/float-fields-leftright#post-6188 Tue, 08 Jun 2010 16:57:56 +0000 Kevin Flahaut 6188@https://legacy.forums.gravityhelp.com/ <p>Okay, I think this is what you're going for. If not, I'm sure you can take what I've done and tweak it to your preference.</p> <p><a href="http://grab.by/grabs/f8786cfa4cb0c7869a9c11a9cf44d004.png" rel="nofollow">Test Screenshot</a></p> <p>So, it's easiest to ditch the float idea, and absolutely position those two fields. Remember, you have to set the wrapper to position:relative for this. (notice, I applied the styles to the containing div and not the form element itself) From there, I just positioned the two containing list items, tweaked the widths, etc. until it looked right.</p> <p>So, here's what you do.</p> <p>First, enable the default Gravity Forms CSS (make sure the "output CSS" option is set to yes in the GF settings page) or, if you're embedding the form via a function call, you'll need to manually enqueue the scripts by placing a script block in your functions.php file. You can find that information in the documentation on embedding a form.</p> <p><a href="http://www.gravityhelp.com/documentation/embedding-a-form/" rel="nofollow">http://www.gravityhelp.com/documentation/embedding-a-form/</a></p> <p>After you've enabled the GF default CSS, you're good to go with the second part.</p> <p>Remove the CSS you already have in place, and replace it with this.</p> <pre><code>#gform_wrapper_5 { margin:10px 0; border:1px solid #AEAFB2;background:#f2f2f2; position:relative;} #field_5_3, #field_5_5 {position:absolute;} #field_5_3 {top:0px; left:275px} #field_5_5 {top:55px; left:275px;} #field_5_1, #field_5_2, #field_5_4 {margin-left:10px;} #input_5_1, #input_5_2, #input_5_3, #input_5_4 {width:240px;} #input_5_5 {height:100px; width:244px; } #gform_wrapper_5 .gform_footer input.button {margin-left:15px;}</code></pre> <p>That should get you rolling.</p> <p>If you need additional styling help, the Visual CSS Guide is a good place to get a lay of the land and run from there.</p> <p><a href="http://www.gravityhelp.com/documentation/visual-css-guide/" rel="nofollow">http://www.gravityhelp.com/documentation/visual-css-guide/</a></p> <p>Good luck. </p> https://legacy.forums.gravityhelp.com/topic/float-fields-leftright#post-6184 Tue, 08 Jun 2010 12:05:42 +0000 Striker22uk 6184@https://legacy.forums.gravityhelp.com/ <p>I'm having a few issues trying to style a form regarding floats.</p> <p>I would like to have the form split into two so that:</p> <p>fields 1 2 &amp; 3 are all floated to the left<br /> whilst 3&amp;4 are floated to the right</p> <p>Although I can get field 4 to float right it sits below everything else so I am having to use a negative margin to place this higher. I cannot get field 3 to position correctly at all.</p> <p>Can you provide some pointers on the best approach to take with this.</p> <p>The current css as it stands is this:</p> <p>#gform_5 {width:560px;border:1px solid #AEAFB2;background:#f2f2f2;}<br /> li#field_5_3 {float:right;}<br /> li#field_5_5 {float:right;}<br /> #input_5_5 {width:300px;height:100px;}</p> <p><a href="http://www.twentyeleven.co.uk/website-scrappage-scheme" rel="nofollow">http://www.twentyeleven.co.uk/website-scrappage-scheme</a> </p>