How to we take care of clearing float when incoming data is dynamic?

I am not entirely sure if this is what you are asking, so sorry if I am missing the mark.

in your project you had an unordered list with list items inside. you populate these list items for example by bringing in images from either your server or an external link. what you were clearing were the list items themselves. think of it as the container of the image. if you were to dynamically pull in contents into these list items, they are still the container for this content.

so you can still clear the space behind every list item. it doesn't change your code.

is this what you were looking for?

Thank you for your reply. In this particular example the 2nd element's text and it was pushing other elements out and the element which was affected by it and which could be seen on the screen was 4th element. So we used the nth-child formula(4n) to clear out the float property.

Are you saying that by using the nth-child formula I am clearing out all the list items, which according to my understanding would be wrong because why choose the 4th element in that case. Or are you trying to say that if i had cleared out the float property of each list element i would have got the same result i.e nth-child(n).

I am sorry if i am not clear , i am very new to CSS so just trying to get my head around it.

thanks

I am saying that no matter how you pull the data into the list item you can always apply a clear to a list item. you are not clearing the content you are clearing the list item which works like a container. so whether you cleared the fourth, every fourth, the third, doesn't matter the code stays the same.

I am not saying you are clearing all list items or that you should have cleared out the every item. I am only saying that dynamically pulled in or static does not matter.

whether you cleared every fourth or every third or second or whatever depends on how much room you want to give each element.

Sorry i think i went on a tangent there, so what i am really asking is there a way where i can dynamically decide about how much room is to be assigned to an element. So in this example I know the 4th element is getting affected hence i use clear float from the fourth element. This i got to know only when i loaded the images on to the screen. Is there a more intuitive way of deciding this , for example is there some kind of generic CSS formula which detects a overflowing float image and apply's the clear float property automatically.

okay just so I understand. in your case we had to clear the fourth element because the third was not as tall as the first and second and thus not properly bumped to the next line. you used a clear property on the fourth element so it couldn't have any floating elements to it's left side. If the elements were all the same height then great, the fourth would just by pushed cleanly to the beginning of the next line

if you have dynamic content you are worried that you don't know how tall each element is going to be. they are always going to take up the same width because you defined it that way.

but: you always want three elements on one line. so just to make sure that you don't have the forth element hanging awkwardly in the middle you clear the fourth in any case.

this whole exercise only applies if you have all element floating freely anyways. if you know you want only three elements on a line you could also put three in a row and then the next three onto the next row.

I am not sure but reading your question again I think you have a misconception about what is happening with the fourth element. there is no content overflowing anywhere. the third element is just not as tall as the second so there is a bit of room after the second where the fourth can slot in because it is the same width as third element.

so we are setting a rule to the fourth element that basically says that the second element is not allowed to be next to it. therefore the gap after the third element (that borders onto the second on the left side) cannot be used. the fourth element will be pushed to the next available space which is at the beginning of the next line.

But lets say if the third element was a bit taller , even in that case if i had cleared the float on the 4th , would it not have readjusted the second row which contains elements 4,5,6 to be in the right place. I would have thought it would have corrected the position of the 2nd row, or is that not the case.

In this example we have set the width such that there are only 3 elements in one row so I therefore think that 4th element will never be in the first row and will be pushed down to the second row. Also because the 2nd element's description text is a bit taller i think it does overflow or is that not the case because all the elements have the same width but the second one has a different height.

in the example before you clear its left side the fourth element is technically on the first line. it shares that little gap in the first line with the third element.

if it was conceivable for the third element to be taller than the first and second then you would get issues with your sixth element. a consequence of this is that if you don't know how tall your elements are going to be it is best to put them inside their own rows instead of just clearing them

I just tried interchanging the 2nd and the 3rd photo and the problem came back again. So, by keeping them in separate div's will they not be sharing borders as in the previous case or will they be completely separate. And do you mean removing un-ordered list and then keeping the images inside a div ?

I am not sure what you mean by the problem came back?

putting them in a row means you make a div around the three items you want in a row and set that div to span the entire line. then do the same for the next three items. so the items on one row don't affect the items on another row.

The solution given in the course, provided you update the expression to 3n + 1, will work for an unknown number of items, from an unknown source, all with unknown heights. This is how you want to try to code things. For the general case, rather than for the very specific content that you have at that point in time.

Whether you add items from a db or put them in the html manually or they come from an ajax request doesn't make any difference. Or I should say, should not make a difference if you've coded the solution properly.

The whole key to this is that you want the first item in every row to clear the previous floats. This insures that the 1st item in each row will be forced down below all previously floated items and will be allowed to move all the way to the left instead of getting blocked by some taller item in the row above. This is what prevents the gaps in the grid.

In a 3 column layout, the first item in every row would be the 1st, 4th, 7th, 11th, and so on. So you need to come up with an expression that will select those numbers. :nth-child(3n + 1) will do that. It starts with the 1st item and then selects every 3rd item after that.

(Take 2) Jason Anello my index.html(gallery section): '''html <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glow.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in phototshop.</p> </a>

     </li>
      <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Drips created using photoshop rushes.</p>
        </a>
     </li>
      <li>
        <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
          <p>Creating shapes.</p>
        </a>
     </li>
    </ul>

'''

The CSS from responsive.css

'''CSS @media screen and (min-width: 480px){ /***************************** Two column layout *****************************/

#primary{ width:50%; float:left; }

#secondary{ width:40%; float:right; }

/***************************** PAGE :Portfolio *****************************/

#gallery li{ width:28.3333% } #gallery li:nth-child(3n + 1){ clear:left;

}

/***************************** PAGE : About *****************************/

.profile-photo{ float:left; margin:0 5% 80px 0; }

}

'''