Cannot get floating divs to work with text-align center

Question

Anyone know how I can get this to work:

<div width="100%" style="background-color:#0000FA;">
    <div style="float:left;width:110px;background-color:#F1F1F1;">
        <form  action="/dashboard/" id="PREVIOUS_MONTH" method="post">
            <input type="submit" class="button-orange" value="Previous Month">
        </form>
    </div>

    <div style="float:left;width:300px;text-align:center;">
            January
    </div>

    <div style="float:right;width:80px;background-color:#F9F0F0;">
        <form action="/dashboard/" id="NEXT_MONTH" method="post">
            <input type="submit" class="button-orange" value="Next Month">
        </form>
    </div>
</div>

All I want is to get the left button on the left hand side, the right button on the right and the text to be aligned between the two buttons, i.e. in the middle of the outer div.

I've tried using display:inline for the text button but I havn't had any luck.

So my output would be:

BUTTON LEFT----------------------TEXT------------------------BUTTON RIGHT

Thanks In Advance

Seems to be working just fine! See a [demo](http://jsfiddle.net/BXp9v/) — djthoms, Jan 13 '13 at 03:57
@Chris - Try putting it into http://jsfiddle.net so people can test possible solutions — Ed Heal, Jan 13 '13 at 03:57
@djthoms hey, yeah it does but, as I mentioned, I want the text i.e. January to be 'auto' positioned between the two buttons. Catch my drift? — cwiggo, Jan 13 '13 at 04:00
@EdHeal Sorry, I should've done that, has politely made one for me! Check it out — cwiggo, Jan 13 '13 at 04:01

score 2 · Accepted Answer · answered Jan 13 '13 at 04:06

If you don't float the text then you should be good. You'll also need to put the floats before the text.

<div width="100%" style="background-color:#0000FA;">
    <div style="float:left;width:110px;background-color:#F1F1F1;">
        <form  action="/dashboard/" id="PREVIOUS_MONTH" method="post">
            <input type="submit" class="button-orange" value="Previous Month">
        </form>
    </div>

    <div style="float:right;width:80px;background-color:#F9F0F0;">
        <form action="/dashboard/" id="NEXT_MONTH" method="post">
            <input type="submit" class="button-orange" value="Next Month">
        </form>
    </div>

    <div style="text-align:center;">
            January
    </div>
</div>

http://jsfiddle.net/BXp9v/2/

James, I have tried your implementation, but when I add it the right hand button goes onto a separate line i.e. underneath, see [picture](http://i.imgur.com/mzgrT.png) — cwiggo, Jan 13 '13 at 04:15
Yeah you were write, problem is I had it all written in PHP, so I could have missed a tag here or there, thanks for the solution, did not think of putting the text after the floats. Thanks! — cwiggo, Jan 13 '13 at 04:37

score 1 · Answer 2 · answered Jan 13 '13 at 04:11

1

You have a number of problems. As James said, don't float the text. Then, neither of your inputs are properly closed, and the widths on the two remaining floats are too small (and unnecessary).

http://jsfiddle.net/FxcWB/3/

<div style="text-align: center;">
  <div style="float:left;">
    <form action="/dashboard/" id="PREVIOUS_MONTH" method="post">
      <input type="submit" class="button-orange" value="Previous Month" />
    </form>
  </div>

  <div style="float:right;">
    <form action="/dashboard/" id="NEXT_MONTH" method="post">
      <input type="submit" class="button-orange" value="Next Month" />
    </form>
  </div>

  <div>January</div>
</div>

answered Jan 13 '13 at 04:11

isherwood

58,414
16
114
157

isherwood, same as above, i've tried your implementation, I can understand why this would work and should work but I get this result, see [picture](http://i.imgur.com/mzgrT.png), btw +1 for reminding me to close input tags! – cwiggo Jan 13 '13 at 04:20
Thanks for your help solving the problem :) – cwiggo Jan 13 '13 at 04:37
1

@isherwood The `input` tags should only be "closed" if he is using XHTML. http://stackoverflow.com/questions/3201870/are-self-closing-input-tags-valid-in-html-4 – James Montagne Jan 13 '13 at 19:47
Right you are. My mistake. – isherwood Jan 13 '13 at 23:54

Cannot get floating divs to work with text-align center

2 Answers2