ヘッダ上、ロゴと同じボトムラインに合わせて右詰のコメントを入れたい。

Question

HTMLサイトのヘッダにて、960pxの幅を作成し、左端に大きくロゴをいれ、その右下（ロゴと同じボトムラインにて）にサイトの説明を入れたいのですが、Postionを利用すると、コメントが960pxの外側にいってしまいます。

入力値をいろいろ変更していますが、解決できません。
どこが間違っているのかアドバイス頂きたいです。

よろしくお願いします。

HTML

<header> <div class="HeaderWrapper"> <div class= "HeaderLogo"> <img src="Logo_image\logo.png"> </div>

     <div class="HeaderComment">
        I want to put comment right side of the logo.
     </div>
 </div>

</header>

CSS

.HeaderWrapper{
width: 960px;
margin:0 auto;
height: 180px;
display: flex;
justify-content:space-between;
position: relative;
}

.HeaderComment{
font-size: 26px;
position: absolute;
bottom:5px;
}

Answer 1

.HeaderWrapper{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;/*追加*/
  margin:0 auto;
  width:960px;
  height:180px;
}

ってすれば、.HeaderCommentのpositionとbottomの指定は要らないのでは？

Comments

[ft_ft]

アドバイス頂いたとおり、 align-items:flex-end;を追加、.HeaderCommentのposition, bottom削除で想定通りに表示されました！
ありがとうございます！！！

[ft_ft]

アドバイス頂いた方法だと、IEでもFirefoxでも想定通り表示されましたので、Best answerに選ばせて頂きます。なぜか、positonを使うとIEでは表示が崩れてしまいますので、今回はalign-items:flex-end;を利用してみます。

ありがとうございました！！！

[LibertyBell3]

解決したようでなによりです。
positionは自分も使う方ですけど、使わないで済むならそちらを選んでいます。

Answer 2

当方の環境で見てみたところ特に崩れはなかったですね。
ただ、イメージのようにするには下記の記述も必要かと思いました。

.HeaderComment{
font-size: 26px;
position: absolute;
bottom:5px;

right: 0px; ←これを追加して調整が必要かと思います。
}

Comments

[ft_ft]

回答者様の環境では問題ないとの事でしたので、別ブラウザで表示されたらちゃんと960pxの枠内で表示されました。また、right:0px;で想定どおりに表示されました！