ansaurus

Question

Answer 1

+3 A:

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.

BalusC 2010-08-21 23:17:45

floating is great, but often abused. This is an OK time to be using it, but there are better solutions (inline-block)

jdc0589 2010-08-21 23:44:16

Yes I will put the CSS style in it's own CSS file, just putting it in the HTML file until I get it sorted. Surely floating the form left will make it not in the center?

Jonathan 2010-08-22 10:13:06

Answer 2

A:

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

unigg 2010-08-21 23:27:28

But the text in the anchors in the divs are dynamic, and I don't see why I should have to specify widths, it makes it less flexible.

Jonathan 2010-08-22 10:11:38

Answer 3

A:

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>

jdc0589 2010-08-21 23:39:40

I tried,t his and it worked great in Firefox and chrome (as usual), even when I added float:right to the div which says more stuff. But in opera it works good until I add the float:right to the more stuff div, and then the div jumps down a line?

Jonathan 2010-08-22 10:39:37

You should not have to use float at all with this method. If you need another element displayed the same way, just slap the "element" class on it. If it still jumps down a line it's simply because there wasnt enough space to fit it on the previous line (element was wider than what was available)

jdc0589 2010-08-22 20:37:02

But what you gave was: `<----->DivFormDiv<----->` whereas I wanted `Div<----->Form<----->Div`

Jonathan 2010-08-23 11:17:33

Not following your notation, but you can have inline block elements inside of a wrapping div if thats what you are after

jdc0589 2010-08-23 22:45:30

Answer 4

A:

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>

Jonathan 2010-08-22 15:25:36

ansaurus

tags:

views:

answers:

2 divs on one line with form in between

related questions