Which will be the best practice to accomplish the following:
I have a Section. Inside that section I have a container and inside the container I have 2 blocks. The top block should expand the whole viewport width while the bottom block should stay in the container’s boundaries.
Design:
Bricks:
I guess most straightforward would be to just make the whole section full width and then apply a max width to the wrapper with the content in the center.
Alternatively you could make the top part a separate section which is full width, put it above the other, then give it a negative margin of the height it has. This one might be a pita in respo though.
Another way would be to absolutely position the full width part to the top of the section.
Personally I’d go with the first route since it’s the one that won’t cause any unexpected issues where the design has to be adapted and tinkered with
Use two sections. One wide, the other one boxed.
My first educated guess was your first option (that’s how I have it right now) but I wanted to know if there was/is a “best practice” / “pro” way to achieve it.
Second option isn’t an option for me since it won’t be semantically correct.
Third option could be an option but for a different approach. Maybe if top bar needs to be sticky or something like that.
Thank you for sharing all your options and taking the time to answer my thread.
Thanks for sharing but this isn’t an option for me since it won’t be semantically correct.
