Daily Code 69 | CSS Position (🟥 HTML & 🟦 CSS Course 11)

Gregor Schafroth - Feb 14 -

- Dev Community

It’s HTML & CSS course day 11! Now about 80% through this course already: https://www.youtube.com/watch?v=G3e-cpL7ofc

Today we look at CSS position, apparently the last major thing to learn here.

My Code

Below is some practice code fot this. What’s interesting for position: fixed; is that I can use both left: 0; and right: 0; (or any other value) to just stretch the content.

Also interesting to know is that the best way to avoid the header blocking content below is to just add padding-top to the boddy.

<body style="
  padding-top: 50px;
">

  <div style="
    background-color: black;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    ">header</div>
  <div style="
    background-color: lightblue;
    height: 200px;
    width: 200px;
    position: static;
    ">div 1</div>
  <div style="
    background-color: lightpink;
    height: 200px;
    width: 200px;
    ">div 2</div>

The same thing applies to sidebars. So for YouTube that means the CSS might have something like this

body {
  margin: 0;
  padding-top: 80px;
  padding-left: 80px;
}

So that’s it. At this point I’m not posting the whole YouTube code anymore, as it gets too complex for you to follow. If you want that follow the linked course above instead 🙂