【html】float:left;しても左にずれない

Question

このように「自由」「オリジナルロゴ」がアイコン、ヘッダー、壁紙の下にくるはずが重なってしまってます。どういうことでしょうか。

<div class="contents">
      
<div class="contents-top">
        
<h1>ロゴを買う
</a></h1>        
<div class="contents-top-item">
          
<h2 class="common"><a href="page2.html">アイコン</a></h2>
          
<p>ツイッター用や、フェイスブック用もあります。</p>
        
</div>
  
<div class="contents-top-item">
<h2 class="b"><a style="text-decoration: none; color:#ED7000;" href="page2.html">ヘッダー画像</a></h2>
<p>ホームページ制作や、SNSのヘッダーに使えます。</p>
</div>            
<div class="contents-top-item">
<h2 class="c"><a style="text-decoration:none; color:#007CEC;  href="page2.html">壁紙</a></h2>
<p>スマホの壁紙に使えます。</p>
</div>
</div>

<div class="contents-top-item2">
<div class="contents-top-item">
          
<h2 class="d"><a style="text-decoration: none; color:#04c000;" href="page2.html">自由</a></h2>
          
<p>デザインも大きさも自由です。</p>
</div>
 
<div class="contents-top-item">
<h2><a style="text-decoration: none; color:#04c000;" href="page2.html">オリジナルロゴ</a><h2>          
      
</div>
</div>
</div>
  

.contents
{
  height: 500px;
  background-color: #EBF5FE;
  width: 950px;
  float: left;
padding:30px;
}

.contents-top{
  height:150px;
}

.contents-top h1{
  margin-bottom:30px;
}

.contents-top-item {
  float:left;
  width:270px;
  padding-right:30px;
}

.contents-top-item2{
float:left;
padding-right:30px;
margin-bottom:100px;
width:270px;
}

.contents-top-item h2{
  margin-bottom:10px;
  width:220px;
}

Comments

[ao_love]

まずは閉じタグ忘れなどをチェックをしてみてください。
文法チェックなどをしてくれるエディターを使われた方がいいかと思います。

Answer 1

↓みたいな感じでしょうか？

.contents-top{
  float: left;
  // height:150px;
}

.contents-top-item2{
  float: left;
  padding-right:30px;
  margin-bottom:100px;
  // width:270px;
}

あと別件ですが、h1にaの閉じタグが残ってます。

Comments

[taishi1999]

ありがとうございます。解決いたしました。
あと、質問いいですか?floatとwidthを消すことによってどんな効果があるんですか？
無知ですみません。

[m055001]

すみません、ちょっと間違っていたので、回答を修正しました。
確認をお願いします。

内包されている .contents-top-item ×2 のwidth が
.contents-top-item2 の width より大きかったため、
自由 と オリジナルロゴ が2段に表示されてました。
なので、.contents-top-item2 の width の指定を消しました。

clear: both; は忘れてください。

.contents-top の float に関しては、中身がはみ出てたので、
それをなくしました。

組立段階では、各部品に border を指定すると、
各部品がどういう状態になっているか
わかりやすくていいですよ。

[taishi1999]

ありがとうございました
borderで確認しながら作っていきたいと思います。