Responsive web design-nutrition label step 41

Hello~ I’m pretty confused with overflow and clear. So I have a related question. Please help me get further in the understanding of this part. Thanks!!

Responsive Web Design- Learn Typography by Building a Nutrition Label -Step 41

This step tell us to push down the border by divider with clear:right;
I’m wondering if it can be done by using overflow:hidden? If it can, how can it be done? ( I tried to add a class in the

of daily value with overflow:hidden in css and its not working) If it can’t, why can’t it be done by overflow:hidden.


% Daily Value *

  </div>

.ha{overflow:hidden;}

I’m pretty sure this is Step 41, not 40, right?

You could use the overflow property to bring the label border down below the % Daily Value element but I don’t think you’ll be able to get the divider below it without clear on the divider. I would suggest you open up the browser’s dev tools and start playing with these properties in the inspector to see if you can make it work.

To be honest, I can’t remember the last time I used floats to format layout like this so I can’t give you a good explanation off the top of my head as to why float and overflow work the way they do here. And to be honest, I don’t think you would really use this technique today but I think the intent is to at least introduce you to floats so I understand why they are doing it this way.

Ah~ Yes!! I’ll change it to 41!! Thanks for the info!! Yeah I was trying different things in this, that’s why this question came up.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.