Что не так со следующими CSS и HTML?

Question

Ниже приведен скриншот: .

Как видно, один <div> перекрывает другой <div>.Почему это происходит ?Ниже приведен фрагмент кода HTML для страницы:

<div class="rightDiv">
        <div class="mainCatDiv">
            @foreach (var cat in Model.SubCategories)
            {
                <div class="catDiv">
                    <h2>@Html.ActionLink(cat.CategoryName, "Catalog", "Browse", new { id = cat.CategoryName }, null)</h2>
                </div>
            }
        </div>
        <div class="productCat">

        </div>
    </div>

И это код CSS для этих <div>'s

div.rightDiv { float:right; width:750px; }
div.mainCatDiv { width:100%;  padding:0px 0 0 70px; }
div.catDiv { float:left; width:320px; min-height:50px; padding-left:30px; }
div.productCat { background-color:#333; height:33px; width:100%;  }

Answer 1

Возможно, самым простым решением было бы изменить ваш div productCat, добавив в него значение clear: left, например:

div.productCat { clear:left; background-color:#333; height:33px; width:100%;  }

Это приведет к тому, что div вашего продукта окажется ниже делителей вашей категории.

Редактировать: Похоже, кто-то другой опубликовал тот же ответ, когда я печатал.Желаем удачи!

Answer 2

Из того, что я вижу, div.catDiv слишком широкий, я установил его на 200px, и это, казалось, исправило это. Я не знаю, является ли это слишком широким или узким, но вы можете играть с этим, пока он не будет соответствовать вашим потребностям.

http://jsfiddle.net/EdGGY/1/

1008 * CSS *

div.rightDiv { float:right; width:750px; }
div.mainCatDiv { width:100%;  padding:0px 0 0 70px; }
div.catDiv { float:left; width:200px; min-height:50px; padding-left:30px; }
div.productCat { background-color:#333; height:33px; width:100%;  }
a{ color: green;}

HTML

<div<div class="rightDiv">
    <div class="mainCatDiv">
        <div class="catDiv">
            <h2><a href="#">Catalog 1</a></h2>
        </div>
        <div class="catDiv">
            <h2><a href="#">Catalog 2</a></h2>
        </div>
        <div class="catDiv">
            <h2><a href="#">Catalog 3</a></h2>
        </div>
    </div>
    <div class="productCat">

    </div>
</div>

Answer 3

Если я правильно прочитал вашу проблему, это должно быть исправлением.Вам просто нужно добавить clear к div.productCat.