ｐｈｐで、日記をメインに表示、

よく、bootstrapなどを使用して、

ページの右側に、トピックや日記の題名を記載して、クリックすると
左のメインのページに文章が現れるというページを見ます。

自分は、現在、下記のコードを作っています。

<!Doctype html>
		<head><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="style.css"></head>
	<body>
		<div class="wrapper">
			<div class="header">
				<H2>主の独り言</H>
					<img src="ninja.jpg">

					<p id="RealtimeClockArea">※ここに時計(2桁固定版)が表示されます。</p>
					<script type="text/javascript">
					function set2fig(num) {
					   // 桁数が1桁だったら先頭に0を加えて2桁に調整する
					   var ret;
					   if( num < 10 ) { ret = "0" + num; }
					   else { ret = num; }
					   return ret;
					}
					function showClock2() {
					   var nowTime = new Date();
					   var nowHour = set2fig( nowTime.getHours() );
					   var nowMin = set2fig( nowTime.getMinutes() );
					   var nowSec = set2fig( nowTime.getSeconds() );
					   var msg = "現在時刻は、" + nowHour + ":" + nowMin + ":" + nowSec + " です。";
					   document.getElementById("RealtimeClockArea").innerHTML = msg;
					}
					setInterval('showClock2()',1000);
					</script>
				
					
			</div>
			<div class="container-fluid">
				  <div class="row">
				    <div class="col-sm-9"><p>日本で、...
								</p>
					</div>
				    <div class="col-sm-3">	
					<div class="one">
					<p>通称：主</p>	<p>年齢：３６歳</p>	
					<p>性別：男性</p>	<p>履歴書</p>
						<p>私、主が日々気になったことなどをつづります...</p>
					</div>
					<div class="two">
						<p>現在の日本について</p>
					</div>
				
					
				    </div>
				</div>
				
			</div>
		</div>
	</body>
</html>