CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Ewald Bos
Ewald Bos

Reputation: 1770

div in bottom of another dynamic div

I am trying to stick a div in the bottom of a container while in the middle the container is filled with the contents from a ng-repeat. This content is each time completely different, there can be 1 element or 100's, it fits maximal 5 next to each other and with the float left new rows are being made. The image is standard at 120px width. It is a nested ng-repeat

Here is the CSS

.Container {
    width: 700px;
    margin-left: 10px;
    float: left;
}
.Top {
    background-color: #f7f7f7;
    margin-top: 15px;
    margin-bottom:5px;

}
.bottom {
    background-color: #f7f7f7;
    bottom: 0;
    float: initial;
}
.item {
    min-height: 250px;
    float: left;
    background-color: red;
    width: 120px;
    margin-right: 10px;
    font-family: 'Tahoma';
    font-size: 12px;
    color: #000000;
}

and this is the html

<div class="Container" ng-repeat="items in list">

  <div class="top">i am in the top {{items.date}}</div>

    <div class="item" ng-repeat="item in items">
      <img ng-src="{{item.image}}" />
      <a>{{item.dynamictext}}</a>   
    </div>

  <div class=bottom">i should be in the bottom {{items.addres}}</div>

</div>

so what i want to do is that i get the bottom div always under the last item of the ng-repeat. I tried looking into the $last but that just styles the last item and the last-of-type also just styles the last item of the ng-repeat. Is there a combination possible that allows me to place the bottom div under with a margin of left 10px like

desired result

-- TOP -- 

-- item --
-- item -- etc.

-- BOTTOM --

where i don't know the height of each item and they are place next to each other, current result is:

-- TOP -- 

-- item --
-- item -- -- BOTTOM --

Upvotes: 0

Views: 611

Answers (1)

tim_stuff
tim_stuff

Reputation: 143

Just to be clear, are you wanting to place <div class="bottom">inside<div class="item"...? Is there some reason you can't simply place the div in there to begin with?

edit: It looks like you need to clear the float on your bottom div. Add clear: both; to the .bottom class in your CSS.

Upvotes: 1

Related Questions