CODEWITHSUNDEEP
htmlcssasp.net-mvc-3razor
Pankaj Upadhyay
Pankaj Upadhyay

Reputation: 13594

Whats wrong with the following CSS and HTML?

Following is the screenshot : enter image description here.

As you can see that one <div> is overlapping the other <div>. Why is this happening ? Following is the HTML Code snippet for the page :

<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>

And this is the CSS code for these <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%;  }

Upvotes: 2

Views: 115

Answers (3)

FarFigNewton
FarFigNewton

Reputation: 7273

From what I can see, div.catDiv is too wide, I set it to 200px, and that seemed to fix it. I don't know if that is too wide or narrow, but you can play with that till it fits your needs.

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

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>

Upvotes: 1

David Brainer
David Brainer

Reputation: 6331

The easiest solution would probably be to modify your productCat div to include a clear:left, like this:

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

This will force your product div below your category divs.

Edit: Looks like someone else posted the same answer while I was typing. Best of luck!

Upvotes: 1

ayyp
ayyp

Reputation: 6618

If I read your problem correctly, this should be the fix. You just needed to add a clear to div.productCat.

Upvotes: 1

Related Questions