How to change alignment of certain inline-block elements within a DIV?

Question

I'm trying to achieve that one inline-block elements, would be aligned left and the other one would be aligned right, without changing their display type.

I would like to get a CSS version, otherwise I could live with a jQuery approach as well.

What I mean, I just wanted to show the first two buttons aligned on the left side, the third button on the right side.

jsBin not working example

<table>
    <thead>
      <tr>
        <th>
          <div style="background-color: lightblue; width: 600px;">
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px;float: left;">
              Button
            </span>

            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px; float:right;">
              Button right
            </span>
        </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr><td>where did the background of the header cell go? the background is still there if the elements do not float.</td></tr>
    </tbody>
  </table>

Please include the problem code in your post as well as the jsbin link (http://meta.stackexchange.com/questions/84342/answer-that-only-contains-a-link-to-jsfiddle) — Lowkase, Sep 12 '12 at 17:02
what do you mean by align left? whether to move whole element to left or text inside it. — Satya Teja, Sep 12 '12 at 17:09
But, these are inline with no width set. How can you have alternating alignment on sequential inline elements? It is not clear what you want the result to look like. — jfriend00, Sep 12 '12 at 17:25
@Toskan Please take a look, I have aligned your button on the right. Tell me if this is what you were looking for? — Ilia Ross, Sep 12 '12 at 17:29
I can't evaluate a solution when I don't know what you're trying to accomplish. Your question is not clear. Maybe some people can guess what you want. I cannot. Your question says one left, next one right. In Ilia's, I see two left and one right, not what I thought you asked for. — jfriend00, Sep 12 '12 at 17:53
@jfriend00 I'm sure it already occurred to you as well, that when you spent quite a bunch of time on something, that it seems very obvious to you. No need to closevote the question. — Toskan, Sep 12 '12 at 18:03
I didn't close vote, but I did downvote the question because it's still not clear what you want. I was giving you an opportunity to clarify your question. What is the desired output layout? — jfriend00, Sep 12 '12 at 18:07

Ilia Ross · Accepted Answer · 2012-09-13T18:01:48.467

1

Just set property float:right to your span element.

Working Example

In the second example you provided in the comment, the one with the table, you simply had that problem, because you didn't set the style to the th tag but to the div tag. If you set the property of background-color and width to the th tag, you will get what you want.

Another Working Example

edited Sep 13 '12 at 18:01

answered Sep 12 '12 at 17:25

Ilia Ross

13,086
11
53
88

this is absolutely correct. This is just what I want it to look like. The problem was float in the first place though. I used float in my scenario and this is what happened: http://jsbin.com/ibifoq/11/edit I thought it would always happen, it seems only to happen within tables though. Any ideas? – Toskan Sep 12 '12 at 17:47
add this point i want to refer to a related question here: http://stackoverflow.com/questions/12407541/white-space-nowrap-vs-white-space-normal-why-is-the-effect-on-floating-element – Toskan Sep 13 '12 at 13:37
@Toskan You just did. :) People will read our comments and follow your link if they are interested! – Ilia Ross Sep 13 '12 at 18:00

score 1 · Answer 2 · answered Sep 12 '12 at 18:08

<span>'s are natively inline-block elements -- so that declaration is unnecessary. You could also apply your CSS to the <th> element rather than wrapping everything in that <div>, and utilize :last-child. Technically, you could get rid of the float:left, but it would cause additional CSS to vertically align the buttons.

CSS
    th { background-color:lightblue; width:600px; }
    th span { background-color:red; float:left; height:20px; margin:5px 3px; }
    th span:last-child { float:right }

HTML
    <th>
        <span>Button</span>
        <span>Button</span>
        <span>Button right</span>
    </th>

How to change alignment of certain inline-block elements within a DIV?

2 Answers2