2 divs on one line with form in between_问答_开发者

I'm trying to get one div to float left, and one div to float right, but have a form in between, the form has 2 select elements(drop down boxes) in it.

I can get it so I have:

Div<------------->Text<------------->Div

but not

Div<------------->Form<------------->Div

If I just have an empty form element than it works like the text, but as soon as I put the 2 selects in then the right div drops down a line, the same happens if I put a textbox(input, type text) in place of the 2 selects.

This is the code I have so far (Note I'm not using stylesheet for the moment, but I will eventually)

<div class="nav" style="text-align:center;">

<div class="prev" style="float:left;"><a href="/index.php?m=7" rel="nofollow">« July</a></div>

<form method="get" action="" id="form1">

<select id="months" name="month" onchange="javascript:document.getElementById('form1').submit();">
<option value="1">January</option>
<option value="2">开发者_Python百科February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8" selected="selected">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select id="year" name="yr" onchange="javascript:document.getElementById('form1').submit();">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010" selected="selected">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>

</form>

<div style="float:right;" class="next"><a href="/index.php?m=9" rel="nofollow">September »</a></div>

</div>

The HTML <form> element is by default a block element like as <div> is. It will always go in its own new line. You need to either display it inline or to float it to left as well. Since the two other div's are already floated, easiest is to just float the form as well. E.g.

<form style="float: left;">

That said, consider placing CSS style in its own CSS file and reference by ID's and classes.

There is a much easier way to do this. Css "display: inline-block" is the easiest thing to use. Contrary to popular belief, it DOES have perfect crossbrowser support if the correct tricks are used. Here is an example: (zoom and *display are to make IE play nice)

<html>
  <head>
        <style type="text/css">
            .element
            {
                 display:inline-block;
                 zoom:1;
                *display:inline;
            }
        </style>
  </head>

    <body>
        <div class="element">
            Stuff in here....
        </div>
        <form class="element">
                <input type="text" name="testInput" />
        </form>
        <div class="element">
                More stuff
        </div>
    </body>
</html>

The reason is that you have not assigned width property for divs and forms. If you have floated 2 divs, form should also be floated.

<div class="nav" style="text-align:center;">
<div class="prev" style="float:left;width:200px; background-color:#454545"><a href="/index.php?m=7" rel="nofollow">« July</a></div>

<form method="get" action="" id="form1" style="width:200px; background-color:#454545; float:left">

</form>

<div style="float:right;width:200px; background-color:#454545" class="next"><a href="/index.php?m=9" rel="nofollow">September »</a></div>

</div>

The width is random given. Use this tool to decide the width value

I had to ditch the floating, as none of the answers really worked (don't want to set widths, jdc0589's answers didn't float the divs left and right, and when I did it broke, and floating the form left obviously made it not in the center) so I had to use absolute positioning:

<div class="nav" style="text-align:center;  position:relative;">

<div style="display:inline; position:absolute; top:0px; left:0px; min-width:105px;" class="prev"><a href="/index.php?m=7" rel="nofollow">« July</a></div>

<form method="get" action=""  id="form1">

<select style="" id="months" name="month" onchange="javascript:document.getElementById('form1').submit();">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8" selected="selected">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select style="" id="year" name="yr" onchange="javascript:document.getElementById('form1').submit();">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010" selected="selected">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>

</form>

<div style="display:inline; position:absolute; top:0px; right:0px;  min-width:105px;" class="next"><a href="/index.php?m=9" rel="nofollow">July »</a></div>

</div>