61–70 of 106 posts
Kind of unrelated but if you want to build nice modern layouts and if you are one the 10 people in the planet that doesn't use Tailwind take a look at sub grids. It's really underrated given how well supported and nice to work with it is. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
> Floats can be used to position boxes to the left and right edges of their container box No, that's not exactly what float means! Yes you can accomplish this using floats, but we haven't since flexbox and grid landed. The element is taken out of the normal flow, and this is a confusing way to build layouts for those studying CSS. `float` is more of a typographic tool. If this article calls itself pedantic, it needs…
If an element has `display: block`, it will fill up all horizontal space so every element after it will float below that element.
That is why it is called `float`. It's how the position of elements is calculated.
If you use `float:left|right` it forces the float of that element to float left or right before all other elements in the same container.
That is what float means.
But of course this does not work anymore if your container uses flex or grid.
The first thing that should be explained about CSS layout, is that it has 4 different layout systems: - table, the oldest one, still used for email - float, for articles with inline images - flexbox, most used one today - grid, modern alternative to table There is also absolute and fixed positioning as a hack to bypass layout.
grid is also a sensible default. Unless you actually want flexing, there is no reason to use flexbox and its more complicated syntax.
Earlier quoted context omitted.
Any introduction to HTML/CSS really should explain the fact that when these technologies were created, they were solely meant to render documents online. It was basically created to be like a Microsoft Word but for files on another person's computer. So most of the early properties (like float) were for typographic layout.
It is, after all, HyperText Markup Language. The modern app-based web is incredibly far out of scope of the initial vision of “text documents that link to other text documents.” CSS and HTML are loaded with legacy warts that can never be removed without breaking backward compatibility.
For example if you have some text that must flow around an image that is placed in a corner.
Earlier quoted context omitted.
This is cool! I understand why they removed it, but is there a browser extension that retains this functionality on modern versions of FF?
I've heard Edge of all browsers has this now. Disclaimer: I haven't looked myself.
> Floats can be used to position boxes to the left and right edges of their container box No, that's not exactly what float means! Yes you can accomplish this using floats, but we haven't since flexbox and grid landed. The element is taken out of the normal flow, and this is a confusing way to build layouts for those studying CSS. `float` is more of a typographic tool. If this article calls itself pedantic, it needs…
All elements in a container floats to the top of the container and right or left (depending on the text direction ltr or rtl) of the previous element. If there is no space left it will move below the previous elements. If an element has `display: block`, it will fill up all horizontal space so every element after it will float below that element. That is why it is called `float`. It's how the position of elements is…
Earlier quoted context omitted.
The first 2 are ersatz "layout systems" that were practiced before flexbox and grid. s and the float property can be used alongside Grid. The easiest (and default) layout system (flow) is never mentioned https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
That's a useful MDN page, and it's even the third page of the "CSS Layout" section of "Learn Web Development." And yet, how many people reading these comments have ever seen that page? I'll admit that I hadn't seen it! Sometimes it's nice to read the docs of your tools from the top down, rather than relying on whatever local section of documentation Google sends you when you're solving a specific problem. There are a…
I harp on this a lot, but computer engineering will never be treated seriously if we continue acting like documentaton or manuals are too good for us.
Its like if when designing a bridge no one read the spec sheet on the bolts.
If I ever hear a bridge or structural engineer going "huh, TIL" about a fact found in the manual of a tool or item he uses every day I'm running
Earlier quoted context omitted.
That's a useful MDN page, and it's even the third page of the "CSS Layout" section of "Learn Web Development." And yet, how many people reading these comments have ever seen that page? I'll admit that I hadn't seen it! Sometimes it's nice to read the docs of your tools from the top down, rather than relying on whatever local section of documentation Google sends you when you're solving a specific problem. There are a…
When has it became normalized to not read docs and be almost proud of it? I harp on this a lot, but computer engineering will never be treated seriously if we continue acting like documentaton or manuals are too good for us. Its like if when designing a bridge no one read the spec sheet on the bolts. If I ever hear a bridge or structural engineer going "huh, TIL" about a fact found in the manual of a tool or item he…
The first thing that should be explained about CSS layout, is that it has 4 different layout systems: - table, the oldest one, still used for email - float, for articles with inline images - flexbox, most used one today - grid, modern alternative to table There is also absolute and fixed positioning as a hack to bypass layout.