floatがうまく表示されない

Question

htmlを以下の表記

<div class="menu_block"> <div class="menu_left"> <table class="menu_all"> <tr> <td class="photo"> <a href="menu.html"><img src="images/menu-thumbnail1.jpg" width="130" height="130" alt=""></a> </td> <td> <a href="menu.html" >バナナとキャラメルのタルト</a><br>&yen;400- </td>

        <td class="photo">
          <a href="menu2.html"><img src="images/menu-thumbnail2.jpg" width="130" height="130" alt=""></a>
        </td>
        <td>
          <a href="menu2.html" >アプリコットのタルト</a><br>&yen;400-
        </td>

        <td class="photo">
          <a href="menu3.html"><img src="images/menu-thumbnail3.jpg" width="130" height="130" alt=""></a>
        </td>
        <td>
          <a href="menu3.html">焼きリンゴのタルト</a><br>&yen;400-    
        </td>
      </tr>
    </table>
  
  </div>
  <div class="menu_right">
    <img src="images/menu-photo1.jpg" width="600" height="400" alt="">
    <h3>バナナとキャラメルのタルト &yen;400-</h3>
    <p>バナナのソテーをキャラメルクリームでからめたフィリングがたっぷり</p>

  </div>
</div>

cssを以下の表記
.menu_block {
overflow: hidden;
zoom: 1;
}
.menu_left {
float: left;
width: 280px;
margin-right: 20px;
}
.menu_right {
float: left;
width: 600px;
}

floatの表示がうまく表示ができません。
文字の確認をしてみたのですがそれでもうまく表示させません。
文法の問題でしょうか？　学習してまだ日が浅く中々解決ができません。
どなたかわかる方がいらっしゃいましたらご指導をよろしくお願い致します。

Answer 1

.menu_left に width: 280px; を設定してますが、その中身は280px以上あります。そのため、.menu_right が重なってます。

width: 280px; を削除すれば重ならないように並びます。

何のためにwidth: 280px;を設定したのでしょうか。
また、結局、どのようなレイアウトをご希望なんでしょうか。

Comments

[halken]

ご回答ありがとうございます。
レイアウトは.menu_leftのimgを３枚縦並びに、.menu_rightを横に１枚とういう形にしたいです。
280pxにしたのは全体（_menu.block）が900pxなので.menu_leftで280px＋padding-rightで20px
そして.menu_rightで600pxであわせて900pxにしようと思いました。
何卒アドバイスをよろしくお願いします。

[hatena19]

まず、一からHTMLを設計しなおした方がいいでしょう。

横並びさせるのに、floatを使うのはやめましょう。
表データでもないものをレイアウトのためにtableタグを使うのはやめましょう。

横並びなどのレイアウトは今なら、CSS FlexBox か CSS Grid を使うのがいいでしょう。
とりあえず、上記をキーワードにWEB検索してみてください。

[hatena19]

CSS FlexBox を使ってHTMLから作り直したサンプルです。ご参考に。

https://codepen.io/hatena19/pen/ExgEwPg

ご希望のレイアウトの詳細は分からないので、想像のレイアウトです。レスポンシブ対応のよくある設計になります。

[halken]

詳細な説明をありがとうございます。
試行をしてみます。