DIVレイアウト 100%で左右に振り分けたいだけなのだ

準備

<div style="background:lavender;">
    <div style="background:skyblue;">skyblue</div>
    <div style="background:orange;">orange</div>
</div>

lavender に入った skyblue と orange が上下に並んでる

inline-block で横に並べてみる

inline-blockにして float:right; 付ける

<div style="background:lavender;">
    <div style="background:skyblue; display:inline-block;">skyblue</div>
    <div style="background:orange;  display:inline-block; float:right;">orange</div>
</div>

大体予定通りなんだけど真ん中の空きが気になるなぁ

width:50%とtext-align:right;付ける

<div style="background:lavender;">
    <div style="background:skyblue; display:inline-block; width:50%;">skyblue</div>
    <div style="background:orange;  display:inline-block; width:50%; float:right; text-align:right;">orange</div>
</div>

イイ感じです。

長い文章を入れてもイイ感じです。

table & table-cell で並べてみる

display:table; と display:table-cell; の組み合わせにする

<div style="background:lavender;  display:table;">
    <div style="background:skyblue; display:table-cell;">skyblue</div>
    <div style="background:orange;  display:table-cell;">orange</div>
</div>

あ？

100%に伸ばして text-align:right; 付ける

<div style="background:lavender;  display:table;  width:100%;">
    <div style="background:skyblue; display:table-cell;">skyblue</div>
    <div style="background:orange;  display:table-cell; text-align:right;">orange</div>
</div>

イイ感じです。

長い文章ももちろん大丈夫。

結論

どっちでも目的の見た目にはなるけどtableの方が楽？virtical-alignもできるから。
片側固定・片側可変にするのもtableは楽。

<div style="background:lavender;  display:table;  width:100%;">
    <div style="background:skyblue; display:table-cell; width:100px;">
        skyblue Qiita (キータ) は、プログラマのための技術情報共有サービスです。
    </div>
    <div style="background:orange;  display:table-cell; text-align:right;">
        orange Qiita (キータ) は、プログラマのための技術情報共有サービスです。
    </div>
</div>

どっちかwidth指定してやるだけ。

おしまい。