Managing CSS floats in dynamic scenarios

As you can see from above that the Category3 should be below SubCat's List, but it's taking the place next to it. When Category2 has SubCats then things work fine but when there are no subcats in any Category, this floating around happens.

Following is the ASP.NET Razor Code :-

<div class="rightDiv">
        @foreach (var cat in Model)
        {
            <div class="catDiv">
                <h2>@cat.CategoryName</h2>
                @foreach (var subCats in cat.SubCategories)
                {
                   <h4>@subCats.CategoryName</h4>
       开发者_如何学编程         } 
            </div>
        }
    </div>

Corresponding CSS Code :-

div.rightDiv { float:left; width:750px; }
div.rightDiv div.catDiv { float:left; width:50%; }
h4 { display:inline; padding-right:10px; }

Seems like you need a min-height on #catDiv to make sure that it's at least tall enough to match a "full" div with subCats (maybe using ems). That should push things down.

try to add this class to your css:

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

and try to use it like this:

<div class="rightDiv">
    @foreach (var cat in Model)
    {
        <div class="catDiv">
            <h2>@cat.CategoryName</h2>
            @foreach (var subCats in cat.SubCategories)
            {
               <h4>@subCats.CategoryName</h4>
            } 
        </div>
        <div class="clear"></div>
    }
</div>