Question

I’m designing and developing a website in MVC3 . I created following design for my webpage –

For above design i have written following html-

<div style="float:left;width:100%;" class="singleFloorContainer" id="[e-mail]">
    @if (! string.IsNullOrEmpty(item.FloorNumber))
    {
    <div class="editFloorNumberBlock">
        <span class="editFloorNumber" style="padding-bottom:5px;">@item.FloorNumber</span>
        <span class="editBaseRate hideOverflow">@Html.TextBoxFor(modelItem => item.BaseRate, new { @style = "width:80%;", @onkeypress = "return isNumberKey(event)" })</span>
        <span style="bottom:5px;position:absolute;width:100%;">
         <span style="width:60%;position:absolute;bottom:15px;float:left;">@Html.TextBoxFor(model => item.FloorRise, new { @style = "width:80%;", @onkeypress = "return isNumberKey(event)" })</span>
        <span style="width:40%;position:relative;bottom:15px;float:right;color:#730209;">@calculatedFloorRise</span>
        </span>
        <div style="position:absolute;bottom:0px;" class="editFloorInfo" id="[e-mail]">
        <span style="position:relative;" class="linkSave" >Save</span>
        </div>
    </div>
    }
     <div style="float:left;width:92%;" class="WholeApartmentContainer">

    @foreach (var apt in item.Apartments.Where(a => a.IsDeleted != true))
    {

        <div class="apartmentContainer" style="float:left;min-width:22%;max-width: 22%;">
            @Html.Action("DisplayApartmentForSaleMapEdit", "Apartment", new { apartmentId = apt.Id, apartmentStatus = apt.Status })
        </div>
    }
     <div class="addApartmentDiv OtherLinkStyle" style="float:left;" id="[e-mail]">+apartment</div>  
   </div>

   </div>

when user clicks on +apartment then new empty block of apartment get added. for initial i set apartment height. and there after user can add different elements in the apartment and then that apartment height get changed.

Now my problem is with the position of newly added apartment. It is not showing me design in proper way. What should i change in my design then i can get following result —

Answer 1

As per your screen-shot you can give clear:both to your 5th DIV. Write like this:

div:nth-child(4n+1){
    clear:both;
}

Check this http://jsfiddle.net/rGaGq/1/

OR

For better structure you can use http://masonry.desandro.com/ also.