DEV Community

Cover image for Daily Code 69 | CSS Position (🟥 HTML & 🟦 CSS Course 11)
Gregor Schafroth
Gregor Schafroth

Posted on

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

#beginners #daily #html #css

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>
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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 🙂

Top comments (0)