The element after the header behaves strangely, goes higher, how can I make it work in order, one below the other?
1 Like
The header has a max-height applied, which is not enough to contain its content. So the overflowing content is visible, but the section follows where the max-height ends.
I would say max-height is a poor choice of property to apply to the element.
I noticed this too, but I still don’t quite understand how to fix it.
Remove the max-height property from the header.
Yes, only then my background also drops
Perhaps we need a better idea of what you mean by “fix it”.
If you remove the max height, the header takes up the space it requires to render the header (which has a background on it). And then it puts the section element directly after the header content. Which… is what you asked for in your opening post.
Not exactly, I need the background to be like this too, but if you remove the height, then everything breaks.
What breaks exactly? It all looks broken to me to start with but I can’t see your images.
How can your header be a max-height of 370px yet inside your header you have an element called .raiber that is 380px tall and starts some 150px from the top of the header element. That means the header must at least be around 650px tall to start with. You can’t have elements inside being larger than the parent without something sticking out.
As others have said you don;t need a height there anyway. If you wanted a minimum height you could use min-height which will allow the element to grow.
However unless we can see what you expected those images to do and what size they are we can only guess at what you want.
If you are looking for a full viewport high background image then you would place that on the body or some other element and not the header.