CSSのfloatの設定について

Question

初心者です。
練習でホテルのサイトを作ってみているのですが、
下記header-rightにfloatを設定して右寄せにした際になぜ上に余白ができるのか、ロゴと同じ高さにならないのかがわかりません。
色々いじっているうちに迷子になってしまいました。。
ここ変だよ！という部分があれば教えていただけると嬉しいです。

↓html

<header>
	<div class="container">
		<div id="header-logo"> 
			<a href="#">
				<p class="logo">MARINA HILLS HOTEL</P>
				<p class="sublogo">Resort&Spa</p>	
			</a>
		</div>
		
		<div id="header-right">
			 <div class="el_selectChevron">
            	<select name="setLang" id="setLang" class="js_dropdownLocator">
              		<option value="//www.rihga.co.jp/tokyo">言語 / Language</option>
              		<option value="#">English</option>
              		<option value="#">한국어</option>
              		<option value="#">簡体中文</option>
              		<option value="#">繁体中文</option>
            	</select>
          	</div>
          	<div id="header-sub">	
				<a href="#" id="membership">会員のご案内</a>
				<a href="#" id="question">よくあるご質問</a>
				<a href="#" id="reservation">予約する</a>
			
				<a href="#" id="menu-icon">
					<span class="fa fa-bars"></span>
				</a>	
			</div>
	</div>
		<div id="header-navigation">
			<ul>
				<li><a href="#">宿泊</a></li>
				<li><a href="#">レストラン&バー</a></li>
				<li><a href="#">ウエディング</a></li>
				<li><a href="#">宴会</a></li>
				<li><a href="#">アクセス</a></li>
			</ul>
		</div>
		</div>
	</header>

↓CSS

body{
font-family:'Noto Serif JP', serif;
	}

header{
	width: 100%;
	height: 120px;
}
	
.container{
	margin:20px 10px 0px 10px;
}

#header-logo {
	width:20%;
}

#header-logo a{
	text-decoration:none;
	
}

.logo{
	font-family: 'Merriweather', serif;
	font-size: 20px;
	font-weight: bold;
	color:#130958;
	text-align: center;
	margin: 0;
}

.sublogo{
	font-family: 'Karla', sans-serif;
	font-size: 10px;
	font-weight:bold;
	color:#372d79;
	letter-spacing: 10px;
	text-align: center;
	margin: 0;
	
}

#header-right{
	float: right;
	
}

#header navigation ul{
	display: table;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	text-align: center;
}

#header-navigation ul li{
	display: table-cell;
	min-width: 50px;
	list-style: none;
	float: left;
	background-color:#372d79;
	transition:color 0.3s;
}

#header-navigation ul li:hover{
	background-color: #ffffff;
}

#header-navigation ul li a{
	display: block;
	width:80%;
	padding: 10px 0;
	text-decoration: none;
	font-weight: bold;
	color:#ffffff;
}

Comments

[kei344]

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[sanayaaan]

とても見づらいですね、、、やってみます！

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[m.ts10806]

あ、既に同じ指摘が入っていた。

[sanayaaan]

すみません、編集いたしました。お願いいたします。

Answer 1

floatはその要素が始まる地点から始まるので、#header-logoもfloatしていないと同ラインには並びません。

#header-logo {
    width: 20%;
    float: left;
}

ただ、「画像の周りに文字を回りこませたい｣などの場合以外のレイアウトには
floatは使わないほうがよいです。（flexやgridが無かった時代にレイアウト用途で使われていただけで、使いやすいわけではない）
いまからCSSを勉強するならflexやgridでレイアウトを作ることをお勧めします。

【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

【CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024

【これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA】
https://ics.media/entry/15921/

【CSS Grid Layout を極める！（基礎編） - Qiita】
https://qiita.com/kura07/items/e633b35e33e43240d363

Comments

[sanayaaan]

リンクまでつけてくださりありがとうございました！！
flexやgridでの配置を勉強します！

Answer 2

floatを使わなくていいなら
logoとlogo-rightを同じdivに突っ込んでflexを適用、両端揃えのがいいかと

<div class="container">
  <div class="flex">
    <div id="header-logo">
      <a href="#">
        <p class="logo">MARINA HILLS HOTEL</p>
        <p class="sublogo">Resort&Spa</p>
      </a>
    </div>

    <div id="header-right">
      <div class="el_selectChevron">
        <select name="setLang" id="setLang" class="js_dropdownLocator">
          <option value="//www.rihga.co.jp/tokyo">言語 / Language</option>
          <option value="#">English</option>
          <option value="#">한국어</option>
          <option value="#">簡体中文</option>
          <option value="#">繁体中文</option>
        </select>
      </div>
      <div id="header-sub">
        <a href="#" id="membership">会員のご案内</a>
        <a href="#" id="question">よくあるご質問</a>
        <a href="#" id="reservation">予約する</a>

        <a href="#" id="menu-icon">
          <span class="fa fa-bars"></span>
        </a>
      </div>
    </div>
  </div>

  <div id="header-navigation">
    <ul>
      <li><a href="#">宿泊</a></li>
      <li><a href="#">レストラン&バー</a></li>
      <li><a href="#">ウエディング</a></li>
      <li><a href="#">宴会</a></li>
      <li><a href="#">アクセス</a></li>
    </ul>
  </div>
</div>

body {
  font-family: 'Noto Serif JP', serif;
}

header {
  width: 100%;
  height: 120px;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.container {
  margin: 20px 10px 0px 10px;
}

#header-logo {
  width: 20%;
}

#header-logo a {
  text-decoration: none;

}

.logo {
  font-family: 'Merriweather', serif;
  font-size: 20px;
  font-weight: bold;
  color: #130958;
  text-align: center;
  margin: 0;
}

.sublogo {
  font-family: 'Karla', sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #372d79;
  letter-spacing: 10px;
  text-align: center;
  margin: 0;

}

#header-right {
  float: right;

}

#header navigation ul {
  display: table;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  text-align: center;
}

#header-navigation ul li {
  display: table-cell;
  min-width: 50px;
  list-style: none;
  float: left;
  background-color: #372d79;
  transition: color 0.3s;
}

#header-navigation ul li:hover {
  background-color: #ffffff;
}

#header-navigation ul li a {
  display: block;
  width: 80%;
  padding: 10px 0;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}

Comments

[sanayaaan]

このようにすれば良いのですね、ありがとうございました！
これからはflex使うようにしてみます。