Search code examples
htmlcssnavigationresponsivestyling

Wrapping main and footer elements together is bad practice?

I want to recreate this side menu behavior:

I have HTML structure currently:

<body>
   <header>
      <nav>
         <ul></ul>
      </nav>
   </header>
   <main></main>
   <footer></footer>
</body>

I want all visible area scale down once side menu is called, including footer if it's visible at the moment. I was thinking of wrapping main and footer in div and scaling it like in this mock-up: enter image description here

But is it not against good HTML structure principles? And what tag will be best for it?

Code needs to be working in all modern browsers.

Solution

  • There are a couple of thoughts you can consider.

    Only insert the wrapping div when sidebar is called to appear - Your probability going to use javascript to open the side menu. Your HTML structure will only be effected when opening the sidebar. When the animation/state closes you can remove the wrapping div.

    Scale the two elements and place them together - You don't need to make the main and footer as one element, try to scale them down and place them near each other and make it look like one element. I'm aware that this going to need some back and forward correction. But this means you don't need to wrap the elements at all.

    Make a screenshot of the page after page load - This is a more technical solution. There are libraries that can screenshots of your current viewport and make it an image. You can screenshot and place them inside the navigation element. I do think this is not the best solution, but still worth a mention. See: http://html2canvas.hertzen.com/