I have created a custom master page in SP2013 using design manager. The structure is as follows:-

The issue is when the web part in the "content" div exceeds the browser window width the header and footer does not stretch correspondingly. How do we fix it with design and CSS. Jquery is not an option since the content width does not come up consistently. I resolved it using Jquery but if there are 2 web parts side by side that won’t work.

All the container div classes show fixed width on page load even if the content exceeds the browser window.

I tried CSS styles like width: auto which also didn’t work.

Attaching an image for better clarity.

Header Footer not stretching

1 Answer 1


You need adjust parent's css:

  1. page div = width 100%; float: left
  2. header div = width 100%; float: left
  3. content div = width 100%; float left
  4. inner content div 1 = width 70% (for example) float: left;
  5. inner content div 2 = width 30% (for example) float: left
  • Thanks for your answer. But it didn't help me in this scenario. The HTML structure is like this : <div id="s4-workspace"> <div id="headerContainer"></div> <div class="ms-bannerContainer" ></div> <div id="content"></div> <div id="footerContainer"></div> </div>
    – Avi
    Commented Aug 5, 2015 at 8:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.