CSS to align horizontal label and forms

Question

Within my Mako Template ,I display a list of existing "Options", and for each of them I have 5 forms with submit buttons. They are currently displayed like this :

.....
Option_i
  Buton_i_1
  Buton_i_2
  Buton_i_3
  Buton_i_4
  Buton_i_5
.....

I would like to have the arranged hoorizontally, like this

.....
Option_i Buton_i_1 Buton_i_1 Buton_i_1 Buton_i_1** 
.....

My current html code to generate an "Option" looks like this :

<div>
    <div>
        <label class="header_option" >OPTION</label>
    </div>

<div>   
    <form name="input" action="action_1" method="get">
       <input type="submit" value="Submit">
    </form>

  <form name="input" action="action_2" method="get">
       <input type="submit" value="Submit">
  </form>
 .................
  <form name="input" action="action_5" method="get">
       <input type="submit" value="Submit">
  </form>
<div>

Any suggest towards achieving the desired effect ?

Answer 1

HTML

    <div>
      <label class="header_option" >OPTION</label>
    </div>
    <div>   
      <form name="input" action="action_1" method="get">
           <input type="submit" value="Submit">
      </form>
      <form name="input" action="action_2" method="get">
           <input type="submit" value="Submit">
      </form>
      <form name="input" action="action_3" method="get">
           <input type="submit" value="Submit">
      </form>
      <form name="input" action="action_4" method="get">
           <input type="submit" value="Submit">
      </form>
      <form name="input" action="action_5" method="get">
           <input type="submit" value="Submit">
      </form>
    </div>

CSS

div { 
    float: left;
}
form {
    float: left;
}

DEMO: http://jsfiddle.net/eBu29/

Also make some changes with your DIV's, you didn't closed them all etc. etc.

Answer 2

Try below CSS

form
{
    float: left;
    width: auto;
}
div
{
    float: left;
    width: auto;
}