How can I create a 100% width div?

Design help General
1

I want to have a container on my page which will be 100% width and resize with the browser window but all width options seem to be disabled and restricted to 960px. I want the <div class="w-container home-container"> (the div with the image background) )to fill the browser window horizontally

<body>
  <header class="header">
    <div class="w-nav global-nav" data-collapse="medium" data-animation="default" data-duration="400" data-contain="1">
      <div class="w-container">
        <a class="w-nav-brand" href="#">
          <div class="brand-name">mysite</div>
        </a>
        <nav class="w-nav-menu" role="navigation"><a class="w-nav-link nav-link" href="#">Home</a><a class="w-nav-link nav-link" href="#">About</a><a class="w-nav-link nav-link" href="#">Contact</a>
        </nav>
        <div class="w-nav-button">
          <div class="w-icon-nav-menu"></div>
        </div>
      </div>
    </div>
  </header>
  <div class="w-container home-container">
    <div class="hero-heading">We deliver irresistible content strategies
      <br> that help B2B software companies succeed</div>
    <div class="w-row">
      <div class="w-col w-col-4 home-column">
        <div class="transparent-panel">
          <div class="w-embed circle-icon"><span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
          </div>
          <h1>Generate more leads and sales</h1>
          <div class="home-column">To sell more software, you need to provide the right content, to the right audience, in the right format, at the right time, through the right channel. Our ContentElevator™ content marketing package makes it happen.</div>
        </div>
      </div>
      <div class="w-col w-col-4">
        <div class="transparent-panel">
          <div class="w-embed circle-icon"><span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
          </div>
          <h1>Increase the value of existing customers</h1>
          <div class="home-column">New business is always good. But new business from customers you already have can be the best of all – because the acquisition cost is lower. Our AccountBuilder™ key account marketing package helps you increase your share of wallet within your most important existing accounts.</div>
        </div>
      </div>
      <div class="w-col w-col-4">
        <div class="transparent-panel">
          <div class="w-embed circle-icon"><span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
          </div>
          <h1>Position a new product, service or solution</h1>
          <div class="home-column">Where does your product fit within your market? What is its value proposition? And how should you communicate the benefits? Our CoreContent™positioning and messaging package helps you answer these questions and ensure your audience understands, believes and likes what your marketing tells them.</div>
        </div>
      </div>
    </div>
  </div>
  <div class="mid-section">
    <div class="w-row">
      <div class="w-col w-col-6">
        <h2>Not sure where your content is headed? Let us give you a roadmap</h2>
      </div>
      <div class="w-col w-col-6"><img src="https://d3e54v103j8qbb.cloudfront.net/img/image-placeholder.svg" alt="image-placeholder.svg"><img src="https://d3e54v103j8qbb.cloudfront.net/img/image-placeholder.svg" alt="image-placeholder.svg"><img src="https://d3e54v103j8qbb.cloudfront.net/img/image-placeholder.svg" alt="image-placeholder.svg"><img src="https://d3e54v103j8qbb.cloudfront.net/img/image-placeholder.svg" alt="image-placeholder.svg">
      </div>
    </div>
  </div>
  <div class="mid-section">
    <div class="w-row mid-section2">
      <div class="w-col w-col-6">
        <h2>About Us</h2>
      </div>
      <div class="w-col w-col-6"><img src="https://d3e54v103j8qbb.cloudfront.net/img/image-placeholder.svg" alt="image-placeholder.svg"><img src="https://d3e54v103j8qbb.cloudfront.net/img/image-placeholder.svg" alt="image-placeholder.svg"><img src="https://d3e54v103j8qbb.cloudfront.net/img/image-placeholder.svg" alt="image-placeholder.svg"><img src="https://d3e54v103j8qbb.cloudfront.net/img/image-placeholder.svg" alt="image-placeholder.svg">
      </div>
    </div>
  </div>
</body>
2

Hi @codecowboy, if you use a container, the width is constrained to 960px total. Rather than use a container, just use a div and give it 100% width. You can also use a section and set it to 100% width. Does that answer your question? Cheers, Dave

3

@cyberdave thanks :slight_smile: Is there a way to convert my div from a container to a plain div?

4

Hi @codecowboy you cannot convert a container into a div, but you can just drag the contents of the existing container into a new div or section.

If you are just wanting the background to stretch the whole section/page width, and other content like text paragraphs to be aligned in the center of your page with a container max width of 960px, then I would first create a section, give it a class name, then set the background of that section to be what image you want, and set to cover the whole section. Next drag your existing container into that section and remove the image on the container. That should give you better results.

Your end result in the navigator would look something like:

Section with background image set to cover
– Container with no background
– other content in container

I hope that helps, if you provide a read only share link from your site settings dashboard, we can take a look after you make changes. I hope that helps :slight_smile: Dave

1 Like