fortnox007 Posted October 31, 2010 Share Posted October 31, 2010 Hi all i was testing a bit with styling a form and i was wondering if someone can confirm or deny if it is possible to have div's inside a form i.e. <div id="wrapper" style="position:relative;"> <form action="#" method="post"> <div id="left" style="position:absolute; left:1px;"> Some stuf inside here</div> <div id="right" style="position:absolute; right:1px;">Some stuff inside here</div> </form> </div> for some reason i can't seem to get it to work. Or should i maybe work with the old schools. so 2 questions: 1) are divs inside forms possible? 2) how to style it awesome see attachment for a graphical idea [attachment deleted by admin] Quote Link to comment https://forums.phpfreaks.com/topic/217388-fancy-forms/ Share on other sites More sharing options...
fortnox007 Posted October 31, 2010 Author Share Posted October 31, 2010 hehe I fixed it's at-least for the div's inside the form, so that's possible. The only thing i can't figure out is how to prevent the inside div's to overlap the wrapper. I have this code: <div id="left" style="margin:1px;background:#ff6600;border: 1px solid white;"> <p style="font-family: arial; color:white;">enter values</p> <div id="form_wrapper" style="position:relative;"> <form action="index.php" method="post"> <div id="left_form" style="float:left;"> <textarea name="blablabla" rows="4" cols="20"></textarea> </div> <div id="right_form" style="float:left;"> <input id="bla" type="text" name="bla" value="" /> </div> <input type="submit" name="submit_users" value="generate" /> </form> </div> </div> any help would be helpful see attachment for the overlapping [attachment deleted by admin] Quote Link to comment https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1128750 Share on other sites More sharing options...
fortnox007 Posted October 31, 2010 Author Share Posted October 31, 2010 Hmm i think i fixed it By adding overflow:hidden; But if some css expert could advise me i would be very happy, cheers! Quote Link to comment https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1128762 Share on other sites More sharing options...
michaellunsford Posted November 1, 2010 Share Posted November 1, 2010 Basically you just need a clear at the bottom of your form. The floats "float" and don't allow the parent div to detect how tall it's supposed to be. I don't know why this is the standard, but I know if you add <div style="clear:both;"> </div> as the last element inside the form tag. That should allow the parent div to expand to the proper size. Quote Link to comment https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1128963 Share on other sites More sharing options...
fortnox007 Posted November 1, 2010 Author Share Posted November 1, 2010 Thanks Michael, I'm am sure gonna try that out. The overflow hidden worked also as far as I can tell, but i found out you need to specify the width otherwise IE 5 and 6 will go mad. Thanks m8! Quote Link to comment https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1128973 Share on other sites More sharing options...
fortnox007 Posted November 1, 2010 Author Share Posted November 1, 2010 I just tried your clear both trick on the last div inside the form. That does work in a way making the container div stretch to the height of the inner elements, but it doesn't let them float next to each other but instead there are on top of each other: I did: <div id="left" style="margin:1px;background:#ff6600;border: 1px solid white;"> <p style="font-family: arial; color:white;">enter values</p> <div id="form_wrapper"> <form action="index.php" method="post"> <div id="left_form" style="float:left;"> <textarea name="blablabla" rows="4" cols="20"></textarea> </div> <div id="right_form" style="clear:both;"> <input id="bla" type="text" name="bla" value="" /> </div> <input type="submit" name="submit_users" value="generate" /> </form> </div> </div> Hmm maybe add an extra div inside the form? That sound in a way as a bad practise. can someone confirm or deny? -edit: I used your trick by adding an extra div at the bottom and i think it worked. <div id="left" style="margin:1px;background:#ff6600;border: 1px solid white;"> <p style="font-family: arial; color:white;">enter values</p> <div id="form_wrapper"> <form action="index.php" method="post"> <div id="left_form" style="float:left;"> <textarea name="blablabla" rows="4" cols="20"></textarea> </div> <div id="right_form" style="float:left;"> <input id="bla" type="text" name="bla" value="" /> </div> <input type="submit" name="submit_users" value="generate" /> </form> <div style="clear:both"></div> <!-- EXTRA DIV TO DO SOME MAGIC --> </div> </div> Could anyone say if this is a good practise? (the adding of an extra "clearing div" instead of overflow hidden) i heared somewhere that using too many divs is named divitis Quote Link to comment https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1128979 Share on other sites More sharing options...
michaellunsford Posted November 1, 2010 Share Posted November 1, 2010 The clear div should be the last element inside your <form> tag - not somewhere in the middle. The reason your divs are not next to each other is divs are 100% wide by default. If you want them to float next to each other, you have to assign a height and width. As to divitus, I'd say you already have it. Here's the same code with only two divs. <head> <style type="text/css"> textarea { float:left; } input {float:left; } .clear {clear:both; } #left { margin:1px; background:#ff6600; border: 1px solid white; } p.pstyle { font-family: arial; color:#FFFFFF; } </style> </head> <body> <div id="left"> <p class="pstyle">enter values</p> <div id="form_wrapper"> <form action="index.php" method="post"> <textarea name="blablabla" rows="4" cols="20"></textarea> <input id="bla" type="text" name="bla" value="" /> <input type="submit" name="submit_users" value="generate" /> <div class="clear"> </div> </form> </div> </div> </body> Quote Link to comment https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1128992 Share on other sites More sharing options...
fortnox007 Posted November 1, 2010 Author Share Posted November 1, 2010 Oh wow!! that looks nice. I only thought div's could float. I haven't tested it yet but this sure looks great. Thanks a lot for helping me! -edit: it works like a charm! Thanks -edit2: this is a big discovery for me the floating of other elements than div's make its all easier and can cure my divitis haha Quote Link to comment https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1128994 Share on other sites More sharing options...
haku Posted November 1, 2010 Share Posted November 1, 2010 Rather than using a clearing div, you can put overflow:auto on the container. Works mostly the same as overflow:hidden, except that sometimes hidden makes things disappear. Be warned that relatively positioned elements inside an element with overflow:auto will force scrollbars on the container. But it's best to avoid relative positioning for the most part anyways. Quote Link to comment https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1129050 Share on other sites More sharing options...
fortnox007 Posted November 1, 2010 Author Share Posted November 1, 2010 Thanks a bunch for the tip haku, I have much to learn, but i bet, ones i fully understand this floating stuff in full detail I have done the hardest part. Cheers! Quote Link to comment https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1129069 Share on other sites More sharing options...
nano Posted November 2, 2010 Share Posted November 2, 2010 There is a great article here on creating accessible forms: http://www.alistapart.com/articles/prettyaccessibleforms It's a really great read and insight. The concept of using ordered lists is pretty cool With regards to your above issue, overflow:hidden; on the container is a known method and I believe it works in all browsers bar the quirks modes ones such as IE6. Quote Link to comment https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1129340 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.