Articles List CSS Solution

[00:00:00]
>> Jen Kramer: So now comes the last part, which is the sort of the main body portion of this webpage. And I used floats on this one just to make everything comprehensive from what we did today. We did all these different techniques. And so I've used floats here for the middle.

[00:00:15]
It would be totally fine if you wanted to use flex box instead. Absolutely appropriate. So I did a bunch of stuff. So I'll tell you all the things I did. So we'll start here with our article. And if you look at our html here we have a section.

[00:00:36]
Okay so we have a whole section of this web page in the section contains some articles. So we have an article there. We have an article there. Okay. So first thing I'm gonna do is I'm gonna set up my article, such that it has a margin of two rem and zero.

[00:00:53]
And so this is gonna give me a little bit of space between these articles and let's put on a border.
>> Jen Kramer: Just to show you that is in fact what's going on.
>> Jen Kramer: So you can see now we have our articles. There is one article, here is another article, and they have a bit of space between them, just because it looks prettier that way.

[00:01:22]
>> Jen Kramer: Then we'll deal with the images. So we have article image.
>> Jen Kramer: And I'm gonna float those images left.
>> Jen Kramer: And we're gonna put in a margin around them. Remember trouble, t r b l, top, right, bottom, left. So we're gonna put in four values for this margin.

[00:01:47]
And that will be zero one rem, one rem zero.
>> Jen Kramer: And then finally the bonus thing I didn't talk to you about in class today, but it's in your notes, border hyphen, radius, one rem. Okay so that border radius even though I haven't called the whole border property.

[00:02:08]
The border radius is going to around all four of the corners on my image at a radius of one rem. So if you save that and refresh the page. Cool. Now we have lovely rounded corners there. Right? Lovely rounded corners, and we have text all next to this, and it looks just perfect, right?

[00:02:30]
We're done.
>> [SOUND]
>> Jen Kramer: But wait I floated, so what else do I need to do?
>> Speaker 2: Clear.
>> Jen Kramer: We need to clear, don't we? Because what happens, if I make this page smaller, what happens?
>> Jen Kramer: Possibly weird things right? Maybe some weird things might happen with these floats.

[00:02:50]
So we need to make sure that we clear. And so I copied the little formula to clear and I don't have it in hand so I'll just type it article after
>> Jen Kramer: And that will be content.
>> Jen Kramer: Double quotes. Display table, and and clear both.
>> Jen Kramer: And so that's gonna clear our float, and you'll a tiny difference here.

[00:03:25]
You see how the image is actually technically hanging over the edge of the article? Once we clear that, that problem will go away, okay. So now all I need to do is go back in my code and turn off my ugly borders. Which are easy to find because I made them extra ugly.

[00:03:44]
There's one on the wrapper there we go and save it and refresh my web page and there we go. [BLANK AUDIO]