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 🙂
Top comments (0)