divが排他されて下方に。

Question

◇ローカル開発環境XAMPP
◇WordPress 4.8.1
◇テーマ：「WordPressデザインブック3.x対応」添付CD のsampleテーマ。下記◆はいずれもsampleディレクトリ下。

div#content // width: 850px;
  └ div.post // width; 550px; margin-bottom: 30px;
  └ div.sidebar // width; 300px;

上図のごとく div.post と div.sidebar を並べて収めたいのですが、div.post の右に大きくオレンジ領域が広がり、div.sidebar が div.post の右下に配置されるのが奇態です。
div.postにfloat:left;を追記→画面更新すると解消したかに見えますが、プライベートウインドウでページ内リンクを回遊すると、また div.sidebar が div.post の右下に配置されます。

図中 div.post 右側に広がり、div.sidebar を排他して下方に追いやれる領域は何なのでしょう？ どうやったらこれを消して div.post と div.sidebar の2つを仲良く併置できるでしょうか？

◆home.php

<?php get_header(); ?>
<!-- Contents -->
<div id="content">
    <p class="title">RECENT POSTS</p>
    <?php if(have_posts()): while(have_posts()):
      the_post(); ?>
        <?php get_template_part('content'); ?>
    <?php endwhile; endif; ?>
    <?php get_template_part('pagenation'); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

◆page.php

<?php get_header(); ?>
<!-- Contents -->
<div id="content">
    <?php if(have_posts()): while(have_posts()):
      the_post(); ?>
        <div class="post">
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
    <?php endwhile; endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

◆sidebar.php

<div id="sidebar">
    <ul>
        <?php dynamic_sidebar(); ?>
    </ul>
</div>

◆style.css

/* Basical things */
body {
  font-family: 'メイリオ', 'Hiragino KaKu Gothic Pro', sans-serif;
}

a {
  text-decoration: none;
  color: #0c8bcd;
}

a img{
  border: none;
}

/* Container */
div#container {
  width: 900px;
  margin: 0 auto;
}

/* Header */
div#header{
  font-family: 'Trebuchet MS', sans-serif;
  margin-bottom: 20px;
}

div#header h1{
  font-size: 2.5em;
  margin: 0;
}

div#header h1 a{
  color: #000000;
}

div#header p#desc{
   font-size: 1em;
   font-weight: bold;
   color: #999;
   morgin: 0 0 5px;
}

div#subinfo{
	text-align: right;
	margin: -32px 0 5px
}

/* Navigation Bar */
div#nav{
  font-size: 0.75em;
  height: 30px;
  background-color: #fff;
  border: solid 1px #aaa;
   margin-bottom: 8px;
}

div#nav ul{
  margin: 0;
  padding: 0;
}

div#nav li{
  list-style-type: none;
  float: left;
}

div#nav li a{
  display: block;
  width: 150px;
  line-height: 30px;
  border-right: solid px #aaa;
  color: #000;
  text-align: center;
}

div#nav li a:hover{
  background-color: #c4f254;
}


/* Contents */
div#content{
  width: 890px;
  float: left;
}

p.title{
  font-weight: bold;
  color: #585858;
  width: 200px;
  margin: 0 0 10px;
  padding: 0 30px 0 10px;
  background-image: url(bar.png);
  background-repeat: no-repeat;
  background-position: right top;
}

p.pagenation{
  font-size: 0.75em;
  overflow: hidden;
}

span.oldpage{
  float: right;
}

span.newpage{
  float: left
}


/* Articles */
div.post{
  margin: 0 0 30px 0;
  width: 550px;
  overflow: hidden;
    /* float: left;  */
}

div.post h2{
  background-image: url("chip.png");
  background-repeat: no-repeat;
  background-position: left center;
  border-top: solid 1px #aaa;
  border-bottom: solid 1px #aaa;
  font-size: 0.875em;
  padding: 10px 18px;
  margin: 0;
}

div.post h2 a{
  color: #000;
}

div.post p{
  font-size: 0.875em;
  line-height: 1.6;
}

div.post p.postcat{
  text-align: right;
  margin: -10px 10px 10px 0;
}

div.post p.postcat a{
  font-size: smaller;
  background-color: #a7d043;
  border-radius: 2px;
  color: #fff;
  padding: 1px 5px;
}

div.post p.postinfo{
  color: #0c8bcd;
  text-align: right;
  margin: 0;
}


/* Single Pages */
.single div.post h2{
  background-color: #333;
  color: white;
}
.single div.post h2 a{
  color: white;
}


/* pictures inside articles */
.aligncenter{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignleft{
  float: left;
  margin-left: 10px;
  margin-bottom: 10px;
}
.alignright{
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
}

.wp-caption{
  border: solid 1px #aaa;
  text-align: center;
  padding-top: 5px;
}

/* Gallery */
.gallery-item{
  width: 33%;
  float: left;
  margin-top: 0;
  text-align: center;
}
.gallery img{
  border: solid 1px #aaa;
  padding: 5px;
}
.gallery a:hover  img{
  background-color: #c4f254;
}
.gallery dd{
  margin: 0;
  font-size: 0.75em;
}
gallery br+br{
  display: none;
}


/* Sidebar */
div#sidebar{
  width: 300px;
  float: right;
}

div#sidebar ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

div#sidebar .widget{
  margin-bottom: 20px;
}

div#sidebar h2{
  font-size: 0.75em;
  color: #fff;
  background-color: #aaa;
  border-radius: 3px;
  padding: 2px 10px;
  margin: 0;
}

div#sidebar li li{
  font-size: 0.75em;
  border-bottom: dotted 1px #aaa;
  margin: 0;
}

div#sidebar li li a{
  color: #000;
  display: block;
  padding: 5px 10px;
}

div#sidebar li li a:hover{
  background-color: #f7e29e;
}


/* Photo Dropper */
.alignnone{
  text-align: center;
  margin: 30px 0;
  border: solid 1px #aaa;
  padding: 10px;
}
#pdrp_endAttribution{
  border: none;
  padding: 0;
  font-size: 14px;
  font-style: italic;
  text-align: right;
}

/* Wether and Temperature */
p.tenki{
  width: 50px;
  float: left;
  text-align: center;
  border: solid 1px #f3b62f;
  padding: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
}

/* related issues */
div.related{
  border: solid 1px #aaa;
  margin-top: 20px;
}
div.related p{
  color: #fff;
  background-color: #a7d043;
  margin: 0;
  padding-left: 10px;
}
div.related ol{
  font-size: 0.75em;
}

/* links to devided issues */



/* Footer */
div#footer{
	border-top: solid 1px #aaa;
	padding: 6px 0;
	clear: both;
}

div#footer p{
	font-size: 0.75em;
	font-style: normal;
	font-family: Verdana, sans-serif;
	margin: 0;
}

ご教授いただけますと幸いです。

Comments

[s8_chu]

状況が再現できるリンクなどが用意できるのであれば追記をお願いします。

[kei344]

WordPressテーマはテーマ名と取得したURLを質問文に追記ください。（URLにはリンクを張ることができます）また、状況の再現が可能なHTML/CSSを質問文に追記ください。

[vitabrevisarsl1]

長くなり恐縮ですが、追記いたしました。

Answer 1

    <?php if(have_posts()): while(have_posts()):
      the_post(); ?>
        <div class="post">
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
        </div><?php /* ← これが無いのは転記ミス？ */ ?>
    <?php endwhile; endif; ?>

Comments

[vitabrevisarsl1]

ご指摘ありがとうございます。この転記ミスは気が付きませんでした。　修正してプライベートウインドウで確認しましたところ、事象は変わらずでした。

[kei344]

div.post{
margin: 0 0 30px 0;
width: 550px;
overflow: hidden;
/* float: left; */
}
ここのfloatをコメントアウトしているのも転記ミス？

https://jsfiddle.net/ofg2q44g/

[vitabrevisarsl1]

ご指摘ありがとうございます。このfloatはtestした跡で、上記図書には記載のないものです。

[kei344]

ないと横並びになりませんよ。

[vitabrevisarsl1]

度々ご指摘いただきましてありがとうございます。
結論を申し上げますと、解消いたしました。
ご指摘と図書の相違を検討した結果、ブラウザの検証で次の事実を見つけました。

<<正常でないページ：home.php, category.php>>
div#container
　　└div#content // width: 850px;
　　　　 └ div.post // width; 550px; margin-bottom: 30px;
　　　　 └ div.sidebar // width; 300px;

<<正常なページ：上記以外>>
div#container
　　└div#content // width: 850px;
　　　　 └ div.post // width; 550px; margin-bottom: 30px;
　　└ div.sidebar // width; 300px;

home.phpでは閉じタグもちゃんと入っていますので、なぜ他のページと違っているのか判然としませんが、ともかくhome.phpを

<div>
<div id="content">
～
</div>
</div>

としたところ、homeのみならずcategoryページの表示も正常になりました。

同書1/3程の進捗で、原因は不明ですが、様子見と致します。

kei344様　ベストアンサーとさせていただきます。