横並びの配列にしたいが、横並び配列にならない

Question

練習用のHPを作ってます。
下記のような並びにしたいのですが、『Live Schedule』が『Beatle News』の下に配置されてしまいます。

こうしたい↓

実際↓

下記のようにHTMLとCSSを作っているのですが、何がよくないのかいまいちよくわかりません。
どなたか、お助けいただければ幸いです。

<div id="content">　
      	<p><font size="3">東京ビートルズオフィシャルストアへようこそ。公式グッズ、CD、リマスター盤、ポスタ<br>ーの販売サイト</font></p>
        </div>
      	<h2>Beatle News</h2>
        <?php query_posts ('showposts=2&cat=2');
          while(have_posts()):the_post(); ?>

       <div id="section">
        <div id="thumb">      
           <?php the_post_thumbnail(); ?>
        </div>
        
        <div id="desc">
           <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
           <?php the_excerpt(); ?>
        </div>
       </div>
       <?php endwhile; ?>
      </div>
        
        <div id="right">
        <h2>Live Schedule</h2>
        <div id="right-main">
        <ul>
          <li><a href="a">7月20日東京 武道館</a></li>
          <p>A席: 9800円 B席: 7000円</p>
          <li><a href="a">7月24日横浜アリーナ</a></li>
          <p>A席: 9800円 B席: 7000円</p>
          <li><a href="a">7月30日幕張ロッテスタジアム</a></li>
          <p>A席: 9800円 B席: 7000円</p>
        </ul>
        </div> 
        <div>

body{
	margin: 0;
	background-image: url("images/bg.jpg");
	font-size: 12px;
}

#wrapper{
	background: white;
	width: 1000px;
	margin: 0 auto;
	height: 1050px;
}

h1 {
	padding-left: 20px;
	font-size: 30px;
}

#photo {
	text-align: center;
}

#content p {
	padding-left: 20px;
}

#header{
	clear: both;
	padding-top: 5px;
	margin: 0 auto;
}

#header ul{
	overflow: hidden;
	padding-left: 5px;
	margin: 0 auto;
}

#header li{
	list-style: none; 
	font-size: 20px;
	padding-bottom: 10px;
	margin-left: 20px;
	float: left;
	font-weight:bold;
}

#top{
	margin-left: 20px;
}

h2{
	font-size: 25px;
	margin-left: 20px;
	margin-top: 0;
}

#top-jpg{
	width: 960px;
	height: 250px;
	margin-bottom: 0;
	padding-bottom: 0;
}

#desctiption p {
	padding-left: 20px;
	margin-top: 0;
}

#right{
	float: left;
}

#right-main h2{
	border-bottom: 1px solid gray;
}

#right-main ul{
	list-style: none; 
}

#right-main li{
	font-size: 19px;
	font-weight: 800;
}

#right-main p{
	font-size: 15px;
}

#footer{
	clear: both;
}

#footer-wrapper{
	background: #DBDBDB;
	width: 900px;
	height: 120px;
	margin-left: 50px
}

#footer p{
	padding-top: 60px;
	text-align: center; 
	font-size: 15px;
}

#section {
	overflow: hidden;
	clear: both;
}

#thumb {
	float: left;
	padding: 0 0 20px 20px;
}

#desc {
	float: left;
	width: 300px;
	padding-left: 10px;
}

フレックスにて改めてやってみました。

<div id="main">
      <div id="content">　
      	<p><font size="3">東京ビートルズオフィシャルストアへようこそ。公式グッズ、CD、リマスター盤、ポスタ<br>ーの販売サイト</font></p>
        </div>
      	<h2>Beatle News</h2>
        <?php query_posts ('showposts=2&cat=2');
          while(have_posts()):the_post(); ?>

       <div id="section">
        <div id="thumb">      
           <?php the_post_thumbnail(); ?>
        </div>
        
        <div id="desc">
           <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
           <?php the_excerpt(); ?>
        </div>
        <?php endwhile; ?>
     　 </div>
      </div>
      
      <div id="right">
        <h2>Live Schedule</h2>
       <div id="right-main">
        <ul>
          <li><a href="a">7月20日東京 武道館</a></li>
          <p>A席: 9800円 B席: 7000円</p>
          <li><a href="a">7月24日横浜アリーナ</a></li>
          <p>A席: 9800円 B席: 7000円</p>
          <li><a href="a">7月30日幕張ロッテスタジアム</a></li>
          <p>A席: 9800円 B席: 7000円</p>
        </ul>
       </div> 
      <div>
    </div>

body{
	margin: 0;
	background-image: url("images/bg.jpg");
	font-size: 12px;
}

#wrapper{
	background: white;
	width: 1000px;
	margin: 0 auto;
	height: 1050px;
}

h1 {
	padding-left: 20px;
	font-size: 30px;
}

#photo {
	text-align: center;
}

#content p {
	padding-left: 20px;
}

#header{
	clear: both;
	padding-top: 5px;
	margin: 0 auto;
}

#header ul{
	overflow: hidden;
	padding-left: 5px;
	margin: 0 auto;
}

#header li{
	list-style: none; 
	font-size: 20px;
	padding-bottom: 10px;
	margin-left: 20px;
	float: left;
	font-weight:bold;
}

#top{
	margin-left: 20px;
}

h2{
	font-size: 25px;
	margin-left: 20px;
	margin-top: 0;
}

#top-jpg{
	width: 960px;
	height: 250px;
	margin-bottom: 0;
	padding-bottom: 0;
}

#desctiption p {
	padding-left: 20px;
	margin-top: 0;
}

#right-main h2{
	border-bottom: 1px solid gray;
}

#right-main ul{
	list-style: none; 
}

#right-main li{
	font-size: 19px;
	font-weight: 800;
}

#right-main p{
	font-size: 15px;
}

#footer{
	clear: both;
}

#footer-wrapper{
	background: #DBDBDB;
	width: 900px;
	height: 120px;
	margin-left: 50px
}

#footer p{
	padding-top: 60px;
	text-align: center; 
	font-size: 15px;
}

#section {
	display: flex;
}

#desc {
	width: 300px;
}

としてみたのですが、希望通りになりません。
現在の表記状況は下記の状態なのですが、どうしたら
「ビートルズがやってきたヤァヤァヤァ！」の記事部分を2段にできるでしょうか？
アドバイスいただければ幸いです。

Comments

[K_3578]

まずはfloatとかいう10年前ぐらいの技術を捨ててFlexbox使いましょう

Answer 1

こんにちは。

K_3578さんと同意見で、フロートレイアウトはやめて、フレックスレイアウトを使うのがいいかと思います。

---

それはそれとして、「何がよくないのか」についてです。
フロートは以下の様なふるまいをします。

float が設定されている要素（この場合は <div> 要素）は、文書の通常のレイアウトフローから除かれ、その親コン​​テナ（この場合は <body>）の左側に固定されます。 通常のレイアウトフローで浮動要素の下側に来るコンテンツは、それを包み込み、浮動要素の最上部まで、その右側のスペースを埋めます。

フロート - ウェブ開発を学ぶ | MDN

「浮動要素の下側」とあるとおり、大雑把に言うとフロートは後続の兄弟要素やテキストを回り込ませるものです。

ご提示のコードは #right にフロートがつけられていましたが、これの後続の要素がないので、回り込む要素がありません。

ですので、解決方法ですが、左側に置きたいコンテンツにフロートをつけてはいかがでしょうか。

---

それはそれとして、フロートを使ってレイアウトをする手法は、いろいろ問題が起きやすく大変なのでやめた方がいいです。

Comments

[isykzk]

なるほど・・詳しくありがとうございます！
一回フレックスでレイアウトしてみます！！

[K_3578]

フロートレイアウトは人類には早すぎた技術です。その技術を苦心してやりくりしていた昔の技術記事に
畏敬の念を感じながらフレックスレイアウトにしましょう。

[isykzk]

ありがとうござます！
フレックスでやってみたのですが、どうもうまくいきません・・
質問内容を更新しましたので、何かアドバイスいただけたら嬉しいです！

[K_3578]

フレックスにしてみても画像のようにしかならない、ということでしょうか？

[Lhankor_Mhy]

フレックスレイアウトは、フレックスコンテナ（display:flex）の中で、フレックスアイテム（フレックスコンテナの子要素）を横並びにするものです。
ですので、display:flex をつける場所が違います。

[isykzk]

今回、フレックスさせたいところは、<div id="section">なので、<div id="section">につけてみたのですフレックスコンテナの認識が違うということでしょうか？

[Lhankor_Mhy]

そうですね、先ほどのコメントの通りです。

別の言葉で言えば、フレックスコンテナ自身はフレックスレイアウトにならない、ということです。
フレックスコンテナの内部がフレックスレイアウトになります。

[isykzk]

ご回答ありがとうございます。
<div id="section">に対して、display:flexをかけた時に、適応される子要素は<div id="section">の中にある、<div id="thumb"> と<div id="desc">ということですよね？＞＜

[Lhankor_Mhy]

そうなると思います。

[isykzk]

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