Layout Methods History

[00:00:00]
>> This chapter is gonna cover all of the topics needed for developing our header, let's take a look at the history of CSS layouts. So back in the day when website designs became more complicated, we started seeing the table element being used to layout elements on webpage. So if you were to get a design like the one on the right with a page header and then you got sidebar and mean side by side, and then a page footer, it was pretty common to see the table element being used for this.

[00:00:33]
So they would use table header to represent the page header and table body to represent sidebar and main. And it would have two table cells there and table footer for page footer. And that's why you might see table with role= presentation in more legacy codebases. So this is telling assistive technology, like screen readers, hey, this is not actually a data table, this is just being used to lay out components on this web page.

[00:01:03]
But this was not great for assistive technology because they weren't necessarily sure what was actually a data table and what was just being used for presentation. So that's what this role of presentation was aiming to do, was to tell screen reader, hey, you don't need to read this out.

[00:01:20]
And then we saw the display property. So this allowed us to change the display value of an element from inline or block to inline block, for example, which we'll learn about, right? So if we had three navigation links in these blocks and let's say we wanted them to sit together, well, list items by default are block elements.

[00:01:42]
And so you were seeing people set display inline block and this said, okay, well these are block elements but I want them to be in line with each other. But then the problem was like, okay, how do we get these three elements to sit one next to each other so there's not that white space in between.

[00:02:00]
And you would see things like margin, right, -4 pixels. So this wasn't a great solution, but it was a solution. And then came floats, well, this worked a little bit better than display inline block, but half the time floats didn't work and nobody could figure out why. Float's a property that places the element to the right side or the left side of its container, and it just lets other elements wrap around it.

[00:02:30]
But it actually does remove that element from the normal page flow. So here's an example. We've got an image here and we've told it to float left. So float to the left side of its container. We can see all those paragraphs are floating around it, they wrap around.

[00:02:48]
But sometimes if the containing element was smaller, so you can see here on our dip we've set a height of 160 pixels, but the image, it's taller than that, has a higher width, or I'm sorry, a taller height than 160 pixels. So it's floating outside the bounds of its container.

[00:03:05]
So positioning elements with floats is pretty tricky, and we're not gonna cover exactly how to work with floats, it's a little bit outdated at this point, but this was one solution.