HTMLCSSの写真の配置について

Question

写真の配置について質問です。

tableタグの中に写真を入れることで、写真の位置を固定しようと考えたのですが、なぜか下記の写真の中の、太陽の模様の建物の写真がなぜか右側に飛び出してしまいます。

今回、改善にあたって、chromeの開発ツールを用いて調べたり、cssの文法をくまなく調べたのですが、右にずれそうな要因を見つけることができませんでした。

どのようにすれば、太陽の模様の建物の写真を左に戻すことができますでしょうか？

大変恐縮ですが、どなたか分かる方ご教授願えないでしょうか？

どうぞよろしくお願いします。

HTML

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

CSS

	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	line-height: 0;
}
.clearfix {
	display: inline-block;
	min-height: 1%;

#main {
float:right;
width:650px;
margin:0;
margin-bottom:100px;
padding-left:16px;

}

Comments

[kei344]

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

[revoiot]

さきほど訂正させていただきました。教えていただきありがとうございます。

Answer 1

2行目3行目は2列になっているので、1行目も2列分確保しないとダメですね。
以下のように1行目のtdにcolspan="2"を指定してあげるとよいです。

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

Comments

[revoiot]

ご返信ありがとうございます。

さきほど、セルの連結をするため、tdにcolspan="2"を指定したのですが、写真の位置に変化はありませんでした。

[revoiot]

大変恐縮ですが、もし解決方法がお分かりになられましたら、返信をいただけると幸いです。

[kei344]

To: ShimpeiHorikawaさん
> 写真の位置に変化はありませんでした。
デベロッパーツールにて ginさんの書かれた部分に colspan="2" を挿入したところ、問題なく表示されました。入れる場所やブラウザキャッシュの問題はありませんか？

[gin]

指定するのは「mainimage」の入ってる1行目だけですよ～
上記のソースをそのまままるごとコピーして試してみてくださいな

[revoiot]

kei344様、gin様
ご返信ありがとうございます。

さきほど、htmleditorを再起動したところ、キャッシュがとれたのか、写真の位置が左に移動しました。
今日朝からずっと悩んでいでいたことが、やっとこれで解消できました。
本当にありがとうございました。

大変恐縮ですが、最初にお答えいただいたginさんをベストアンサーとさせていただきます。

お二方様、本当にありがとうございました。

[date]

ホームページへのリンクは消しておいた方がいいです

[revoiot]

ご指摘ありがとうございます。さきほど削除させていただきました。