fancy forms

[fortnox007]

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]

[fortnox007]

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]

[fortnox007]

Hmm i think i fixed it By adding overflow:hidden; But if some css expert could advise me i would be very happy,

cheers!

[michaellunsford]

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.

[fortnox007]

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!

[fortnox007]

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

[michaellunsford]

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>

[fortnox007]

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

[haku]

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.

[fortnox007]

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!

[nano]

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.