Something like this:
The blue on must be position:fix.
One of the problems i have is that even though i use 100% width they dont touch the sides of the page unless i add left:0. Also for some reason some of the top part of the orange div is getting overlapped from the blue one. Any tips? Ty in advance
That will be the default margins on the body element. You can reset that.
html, body {
margin: 0;
padding: 0;
}
You should not need width: 100%, a div will have a default width of auto which will fill its container.
thank you did this but why when i create 3 simple div with float left they dont automatically go down of each other?
Why are you using float?
There is no need to float the divs.
this works but when i make the blue one position:fixed it gets overlapped
Yes, using position: fixed will take an element out of the natural flow, it will cease to take up any space, so other elements in the flow will take the space it previously occupied.
You could add a margin-top to the second div to push it down below the first one.
hmm doesnt seem to work, it just makes the space empty and the blue div is nowhere to be seen
With the position fixed it will now require the width to be set, either by width or setting left and right values (to 0).
Maybe you could explain fully the requirements. This has changed from simply 3 coloured boxes to something more specific.
thanks for bearing with me, i believe this is exactly what i wanted, really apreciate it. (i actually said in my description i wanted the blue one to be fixed btw :D)
There is actually a way to keep it in the flow until you scroll down: position: sticky but it does not yet have universal browser support.
That would be better than the margin-top (if it worked everywhere), because the margin is a “magic number”.
I missed that somehow. 
Learning a bit here.
Nice work guys
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.