float:left で2行で表示する方法を教えてください。

Question

引用テキスト### 前提・実現したいこと

HTMLの勉強を始めて間もない初心者です。

現在、ホームページを作成しております。
「float:left」で1つは横並び。もう一つは段落を変え横並び（中央）にしたいのですが、どうしてもできません。どなたかご教示頂けますでしょうか。
（添付の「点線」を「実践」の位置にもっていきたいです）

◆HTML
    <header>
     <div class="header-logo">
        <img class="logo" src="#">
      </div>

      <div class="header-right">
  　    <a href="#" class="login">情報投稿はコチラ</a>
  　    <a href="#" class="login">ログイン</a>
  　    <a href="#" class="login">新規登録(無料)</a>
      </div>

      <div class="header-center">
          <a>ホーム</a>
          <a>会社情報</a>
          <a>スポンサー募集</a>
          <a>お問い合わせ</a>
      </div>
    </header>

↓これを実線の位置にもっていきたいです。
     <div class="sort">
	 <a>検索フィルター</a>
         <button class="button" type="submit">▼</button>
         <button class="button" type="submit">▼</button>
         <button class="button" type="submit">▼</button>
         <button class="button" type="submit">▼</button>
         <input type="text" style="width: 200px;height: 1px;" value="フリーワード">
    </div>
    </header>


◆CSS
.header-right{
  font-size:12px;
  float:right;
  background-color:rgba(255, 255, 255, 0.3);
  line-height:10px;
  padding:10px 15px;
  display: block;
}

.header-center a{
  font-size:12px;
  padding:10px 15px;
  margin:0 auto;
  width:300px;  
}


.sort{
  border-top:1px solid #d3d3d3;   
  border-bottom:1px solid #d3d3d3;
  padding:15px;
}

.sort a{
 padding:0 50px 0 20px;
}



.button{
  width:150px;
  height:40px;
  border-radius:25px;
  background-color:navy;
  color:white;
 }

input{
 color:#EEEEEE;
}

試したこと

補足情報（FW/ツールのバージョンなど）

Answer 1

こちらでいかがでしょうか?

<header>
  <div class="header-logo">
    <img class="logo" src="#">
  </div>

  <div class="header-right">
    　 <a href="#" class="login">情報投稿はコチラ</a>
    　 <a href="#" class="login">ログイン</a>
    　 <a href="#" class="login">新規登録(無料)</a>
  </div>
  
  <div class="clear"></div><!-- 追加 -->

  <div class="header-center">
    <a>ホーム</a>
    <a>会社情報</a>
    <a>スポンサー募集</a>
    <a>お問い合わせ</a>
  </div>
</header>

/* こちらを追加 */
.clear {
  display: block;
  clear: both; /* floatの回り込みを解除 */
}
.header-center {
  text-align: center;
}

Comments

[退会済みユーザー]

すごい！
こういう考え方で入れるんですね！勉強になりました。
ありがとうございました！