HTMLCSSのオブジェクト配置について

HTMLCSSを使い、オブジェクトの配置について、どうしてもわからないことがあるため、この場を借りて、質問させていただきます。
今回の質問は、オブジェクトの配置に関することであり、部分的な部分のHTMLCSSの情報では、解決するのは、難しいと考えたため、大変恐れ入りながら、比較的いつもより情報を多く、記載させていただいております。

質問至る経緯ならびに、改善しようとするため取り組んだこと

①自分の作ったホームページのPC観覧の際、拡大縮小をすると、web画面のレイアウトが崩れた。それを改善しようと、websiteで調べた。
そこには、オブジェクトの幅、高さなどをパーセント表示にすると、拡大縮小する際、レイアウトが崩れる可能性があるため、すべて実値にしたほうが、よいとあった。

②そのことから、私はGoogle開発ツールを使い、画面大きさ100%の時の全てのオブジェクトの大きさを確認し、%表示されているものを、ピクセル表示に変えていった。しかし、どういうわけか、画面大きさ100%の時でレイアウトがくずれてしまうようになった。それが下記の写真の通りである。mainと左のサイドバーが右のサイドバーに潜り込む形になってしまっている。次に私は、これを改善するため、様々なところを書き換えたりした。
menu_naviに、float:rightを入力
mainの画像それぞれの縮尺の変更
mainのtdの縮尺の変更
mainに、float:rightまたは、float:left;を入力
左のサイドバーにfloat:rightまたは、float:left;を入力
content_boxに、float:left;を入力

以上を試行しましたが、うまくいかずレイアウトが崩れたままでした。

mainと左のサイドバーを上に戻し、拡大縮小表示にかかわらず、レイアウトが崩れない方法をどなたかわかる方大変恐縮ですが、ご教授頂けないでしょうか？

よろしくお願いします。

下に記載のURLは、①の段階の時のURLです。110%拡大の際は問題ありませんが、これ以外の画面の大きさですとレイアウトが崩れます。
co-712.it.3919.com

コード



<body>
    


<div id="container">

<div id="header" class="clearfix">
<div class="header-bloc clearfix">

<div id="wrapper">


<div id="contens-area" class="clearfix">


<div id="side" class="clearfix">

<div class="menu_navi">
	<p class="menutitle"><img src="img/menu.png" alt="メニュー"></p>
	<ul>
	<li><a href="index.html"><img src="img/top-menu.png" alt="トップ"></a></li>
	<li><a href="charge.html"><img src="img/course.png" alt="コース・料金案内"></a></li>
	<li><a href="access.html"><img src="img/access.png" alt="アクセス"></a></li>
	</ul>
</div><!--/menu_navi-->
<p class="L_cy_box">
</p>

<p class="L_cy_box">
■詳しくはNEWS & TOPIXをご覧ください。<br>
<br>
■お客様からのお電話をお待ちしております<br>
tel :  075-746-3155
</p>
</div> 
<div id="main" class="clearfix">

<table cellspacing="0" cellpadding="0" class = "table6">
<tr>
<td colspan="2"><img src="img/mainimage.png" alt="mainimage" class = "mainimage"></td>
</tr>
<tr>
<td align="left" width="50%"><img src="img/sofa.png" alt="ゆったりとしたソファー" class="sofa"></td>
<td align="left" width="50%"><img src="img/appearance.png" alt="お店の外観"class="appearance"></td>
</tr>
<tr>
<td align="left" valign="top"  class="pd1"><span class="color_1">※ゆったりとしたソファーでお待ち頂けます。</span></td>
<td align="left" valign="top" class="pd1"><span class="color_1">※お店の外観です。</span></td>
</tr>
</table>

    
<div id="side2" class="clearfix">    
<div class="menu_navo">
	<p class="menutitlo"></p>
	<ul>
	<li class = "facebook"><iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjoze.beauty%2F&width=50px&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="50px" height="30" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></li>
    <li class = "facebook2">もしよければいいねボタン押してみてください！</li>
	<li class ="qr"><img src="qr.png" alt="QRコード" class ="qrcode">美容所 joze＆ARCH OF JOZE 烏丸御池店のケイタイ</li>
    </ul>
	<li class = "ek"><img src="Reviews.gif" alt="口コミ" class ="Reviews" >口コミランキング<br>1位獲得！</li>
</div><!--/menu_navi-->    
</div>    
    
       
    
<div class="content_box" style="margin:36px 0 65px 0;">

<h3><img src="img/joze.png" alt="JOZE & ARCH OF JOZE" class="joze"></h3>
<!--<div class="title_line"></div>-->

</div><!--/content_box-->

<div class="content_box">

<h3><img src="img/news.png" alt="NEWS"></h3>
<!--<div class="title_line"></div>-->

<div style="width:100%; margin:20px 0; border-bottom:1px solid #aaaaaa;"></div>


</div><!--/content_box-->

</div>  <!--main-end-->

</div>  <!--contens-area-end-->

</div><!--wrapper-end-->


コード

CSS



img.sofa{
    width:124px;
    height:175px;
        
}

img.appearance{
    width:124px;
    height:175px;
}



img.mainimage{
    width:470px;
    height:248px;
}



img.qrcode{
    width:69px;
    height:69px;
}

img.Reviews{
    width:69px;
    height:69px;
}


body {




.clearfix {
	display: inline-block;
	min-height: 1%;
}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix { display: block;}
/* End hide from IE-mac */




body{


.ph{
    padding-top:6px;
    font-size:30px;
}

.ad{
    font-size:11px;
    line-height:15px;
    padding-top:4px;
    
}

.sd{
    font-size:11px;
  
}

.bg{
    line-height:15px;
    margin-top:3px;
    font-size:11px;
}

.qr{
    font-size:10px;
    line-height:10px;
    padding-bottom:30px;
}


.facebook{
    padding-left:5px;
    padding-top:50px;
    font-size:10px;
    line-height:10px;
}

.facebook2{
    font-size:10px;
    line-height:10px;
    padding-bottom:30px;
}

.ek{
     font-size:8px;
     line-height:10px;
}




#wrapper{
    background-color:#D2B48C;
}


#contens-area{
    width:904px;
    margin-left:auto;
    margin-right:auto;
    background:#fff;
}

.contens-area_single_icon{
    width:129px;
    height:96px;
    top:0px;
    right:-131px;
}


#main {
float:right;
width:665.99px;
height:1452.98px;
margin:0;
margin-bottom:100px;
padding-left:16px;
}





/* メニューバー */



li { list-style:none; }

.menu_navi{
width:200px;
margin-bottom:22px;
}


.menutitle{
width:190px;
margin:11px 0 8px 5px;
}


.menu_navi li{
width:185px;
margin:0 0 3px 7px;
}


.menu_navi a:hover img{
opacity: 0.7;
filter: alpha(opacity=70);
}


/* メニューバーend  */


/* 左のメニューバー */



li { list-style:none; }

.menu_navo{
width:81.82px;
margin-bottom:22px;
height:431.82px;
}


.menutitlo{
width:71px;
margin:11px 0 8px 5px;
}


.menu_navo li{
width:69px;
margin:0 0 3px 7px;
}


/* メニューバーend  */
#side{
float:right;
width:201px;
margin:0 22px 0 15px;
}

#side2{
float:left;
width:80px;
margin:0 22px 0 15px;
}

.L_cy_box{
width:197px;
margin:0 0 16px 3px;
}



.pd1{
padding-top:5px;
}


.content_box{
width:750px;
height:658px;
margin:32px 0 36px 0;
color:#313131;
padding-left:100px;
float:right;
}

.content_box2{
width:100%;
margin:32px 0 36px 0;
color:#313131;
padding-left:7px;
}

.title_line{
height:4px;
background: url("img/tw_line.png") bottom repeat-x;
margin:3px 0 0 0;
}


h3{
font-size:24px;
line-height:30px;
/*font-weight:bold;*/
color:#2a2a2a;
}

.table1 .op-td{
width:400px;
word-wrap: break-word;
white-space: normal;
padding-left: 20px;
}

.table1 .op-th{
}

.table5 .op-td{
  padding-left: 20px;
}

.table3 th, .table3 td{
padding: 10px 20px;
}

.table4 th, .table4 td{
padding: 10px 20px;
}

.table5 th{
text-align: center;  
}



.table3 {
  border-collapse: collapse;
}

.table4 {
  border-collapse: collapse;
  margin-top:  30px;

}
.table6 {
    float:right;
    width:470px;
}


コード

行動規範の内容に同意します

回答1件

ベストアンサー

確認ですが、大雑把に言うと、id="contens-area"の中に、左から順に、side2/main/sideって並べばいいんですよね？
だとすると、side2(80px)+main(650px)+side(201px)+更に、両サイドが左右マージン合わせて37px*2で、
1005pxとなり、contens-areaで指定している、904pxを大きく超えています。

そこを治すだけで収まっちゃうような気がしますが…いかがでしょうか？

それ以外に、containerとwrapperが逆になっているところとか、色々ツッコみどころはありますが…

追記：大幅に変えちゃいます(後で気付きましたが、side2にborderが入っていたので、2px追加してます)

HTML
1<div ="wrapper">
2  <div id="header">中身そのまま</div>
3  <div id="container">
4    <div id="inner-container">
5      <div id="main">mainの中身</div>
6      <div id="side">sideの中身<div>
7    <div>
8    <div id="sub">Side2の中身</div>
9  </div>
10</div>

CSS
1.clearfix:after,#container:after,#inner-container:after {
2  content:"";
3  display:block;
4  clear:both;
5}
6#wrapper {/*既存の#containerと差し替え*/}
7#container {/*id="contens-area"と差し替え*/
8  margin:0 auto;
9  width:1007px;
10}
11#inner-container {/*新規：main/sideをまとめて右へ*/
12  float:right;
13  width:888px;
14}
15#main {
16  float:left;
17  width:650px;
18}
19#side {
20  float:right;
21  width:223px;
22}
23#sub {/*side2と差し替え*/
24  float:left;
25  width:104px;
26}
27.menu_navi {/*追加*/
28  margin-right:22px;
29}
30.menu_navo {/*追加*/
31  margin-left:22px;
32}

こんな感じです。
main/side/subには、class="clearfix"不要です。大元のcontainer/inner-containerにCSSの先頭で当てています。

投稿2017/02/07 14:17

編集2017/02/07 15:47

LibertyBell3

総合スコア1084

revoiot

2017/02/07 14:54

ご返信ありがとうございます。はい、そうです。左から順に、side2/main/sideに並べたいと考えています。さきほど、contens-areaの幅を1005px以上にして書いたのですが、side2/mainを戻すことができませんでした。もし、他に改善方法がありましたら、教えていただきたいです。よろしくお願いします。

revoiot

2017/02/08 03:23

大変ご丁寧に多くの記述をしていただき、ありがとうございます。これから、いただいた回答を一つずつ、かみくだいて理解していき、基礎知識を蓄えていこうと思います。大変恐れ入りますが、作業中に、もしまたご不明ながありましたら、質問の際、ご回答いただけると幸いです。ご親切に対応していただきありがとうございました。

行動規範の内容に同意します