Align first div to left with subsequent divs aligned right

Question

I wish to display three pieces of text on the same horizontal line, as follows:

|                                                            |
| Chapter one                              Language: English |               
|                                                            |

I am using | to represent either the extreme left or right of the window. This is what I have now:

<div>
<div>Chapter one</div>
<div>Language:</div>
<div>English</div>
</div>

The text English will eventually be replaced by a combo box. How should I style my divs?

_"The text English will eventually be replaced by a combo box"_ - that doesn't justify making it an extra DIV on the same level as the other two. You should have two DIVs, align one to the left and one to the right. And inside that second one, have a child element to be replaced by the combo box. — CBroe, Oct 02 '16 at 21:23

score 4 · Accepted Answer · edited May 23 '17 at 10:27

#container {
  display: flex;
}
#container > div:first-child {
  margin-right: auto;
}

<div id="container">
  <div>Chapter one</div>
  <div>Language:&nbsp;</div>
  <div>English</div>
</div>

Whether you ultimately have one or two divs on the right (depending on your combo box set-up), the method above will work. It basically keeps the first div flush left and everything else flush right.

More details here:

Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

score 0 · Answer 2 · answered Oct 02 '16 at 21:19

0

The easiest way to implement this is using a table

<table>
   <tr>
        <td style="align:left;">Chapter One</td>
        <td style="align:right;">Language: English</td>
    </tr>
</table>

answered Oct 02 '16 at 21:19

Kushagra

626
6
20

score 0 · Answer 3 · answered Oct 02 '16 at 21:51

using float in nested div can be the solution

<div>Chapter one</div>
<div>
    <div style="float:left;">Language:</div>
    <div style="float:right;">English</div>
</div>
</div>

float property is used to to specify whether an element can float or not. Don't forget to use clear for elements below floating ones.

Align first div to left with subsequent divs aligned right

3 Answers3

Linked

Related