レイアウトが崩れてしまいました。

質問

初心者の素人です。
よろしくお願いいたします。
無料ＨＰ素材を使用してＨＰ作成中です。
メインバナーをスライドショーに変更したらレイアウトが崩れました。
メインバナーの下に4カラムが入りこんでしまいます。
スマホ対応なのですがスマホで見ても同じようにメインバナーの下に4カラムが入り込んでいます。
～～～ｃｓｓ～～～
#mainBanner{
margin:30px auto;
padding:0;
width:100%;
position:relative;
line-height:0;
}

#mainBanner img{
max-width:100%;　←　(ここで画像のサイズを指定したらＰＣはいけますがスマホで画面から画像が出てしまいます)
height:auto;
position: absolute;
top: 0;
left:0;
z-index: 8;
opacity: 0.0;
}

#mainBanner img.active {
z-index: 10;
opacity: 1.0;
}
#mainBanner img.last-active {
z-index: 9;
}

/**************************
/* グリッド
**************************/

.gridWrapper{padding:0px;
overflow: hidden;
}

* html .gridWrapper{height:1%;}

.grid{
float:left;
background:#2a1d12;
}

.grid h3{
padding:10px 5px;
margin-bottom:10px;
background:#000;
font-weight:bold;
text-align:center;
}

.grid p{
padding:5px 10px;
text-align:left;
}

.grid p.img,.grid p.readmore{text-align:center;}

/* グリッド共通 ベース:トップページ4カラム */
.grid{
float:left;
width:220px;
margin-left:20px;
}

～～～html～～～
<!-- メイン画像 -->
<div id="mainBanner">
<img src="main1.jpg" class="active">
<img src="main2.jpg">
</div>
<!-- / メイン画像 -->

<!-- 4カラム -->
<section class="gridWrapper">
<article class="grid">
<h3>CALENDAR</h3>
<p class="img"><img src="1.jpg" width="170" height="135" alt=""></p>
<p><table class="calendar" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC" width="150px">

～～～～～～～～～～～

ＨＰテンプレートはhttp://f-tpl.com/tpl_048/を使っています。
質問させていただくに際し、このタグを見ていただいてご理解いただけるかも不安です^^;
スライドショーはきちんと動いています。
お教え願えましたら幸いです。
よろしくお願いいたします。

回答No.1

DrFell

本当に「初心者の素人」さんでは、問題解決は無理だと思います。教えてくださいと言われても、掛け算引き算をしらない子に割り算を教えるようなもの。

わからないだろうなぁと思いながらも、ヒントです。ギミックな手法でレスポンシブのスライドショーを実現されています。その分の縦幅を確保すればいいだけです。

positionの意味をしっかり理解し、縦幅をどう確保するのかを考える。#mainBannerの縦方向のスペースを確保し、入り込まないようにする。

頑張ってください。

お礼

ご回答ありがとうございます。

ヒントに感謝いたします。
大変参考になりました。
がんばってみますね！