Solution "Fundamental layout comprehension"

Assessment wanted for Fundamental layout comprehension and please answer one question.

When trying to write code, a question arose. Why when creating a page, just positioning the blocks, adding float: ... to article cancels the action position: sticky;? Only in article, I tried to change it to div, it turns out the same thing.

Link to the solution.

A link to the actual task.

Good bye.

Great work, @petrushya!

I guess the Flexbox properties on .grid, article and aside are remnants of an earlier version. These don’t have any effect since you defined display: grid after display: flex.

The columns property on .photos has no effect and you already defined the grid as 1fr 1fr. columns is used for CSS Multi-column Layout.

When trying to write code, a question arose. Why when creating a page, just positioning the blocks, adding float: ... to article cancels the action position: sticky; ? Only in article , I tried to change it to div , it turns out the same thing.

I’m sorry, but I don’t understand the question. Maybe you could edit your “Glitch” to show the problem?

Have a nice weekend,
Michael

Hi @mikoMK

Properties of “Flexbox” .grid is included for compatibility with browsers such as “IE”. Flexbox as a Fallback for Grid

It was decided to delete .photos from @media, the basic CSS rule for
.photos has been changed and works, in my opinion, well.

About float in article - the solution was edited. The navigation bar starts scrolling without fixing from top.

Thank you very much.
Pyotr.

1 Like

Explanation accepted :grin: Just be aware that IE has some bugs with Flexbox. See the “Known Issues” on Caniuse: CSS Flexible Box Layout Module | Can I use... Support tables for HTML5, CSS3, etc

Thanks! Now, I understand. Floating an element takes it out of the normal flow. In your code this results in <main> having zero height and the <nav> has nothing that scrolls under. Try setting main { height: 100px; } and see how the nav sticks for 100px and then vanishes.

See you,
Michael

1 Like

Hi @mikoMK

Thanks a lot for the answer.

Flexbox has incomplete support only in IE, but the grid as well as multiple column have problems in a much larger number of browsers.

About sticky: It is only clear that there should be a “size” for scrolling, but I didn’t quite understand who should be an ancestor to whom?

Good bye!
Pyotr.

1 Like