Full width divs with max width content

Question

I'm having issues having full width divs that have different % widths and also keeping the content fixed within it and lining it up with another full width div. The JS Fiddle should be better at explaining this.

<header> <!-- 100% width -->
 <div></div> <!-- 100% width; max-width: 1000px; margin: auto -->
</header>

The above works fine if it was a single column.

I want to have two divs below it, one taking up 33% and the other taking up 67% and keeping the content within these lined up similar to how the above is working. The max-width div is the visible content container. So if you were viewing the site on a large screen everything would be edge to edge, but the content within would be framed in the middle.

Sample fiddle, where the divs with 2 and 3 should take up the same amount of space as the div above it. http://jsfiddle.net/qtLe7o8f/1/

header {
  background: blue;
  padding: 15px 0;
}
header div {
  max-width: 500px;
  background: red;
  margin: auto;
}

section.one {
  float: left;
  width: 33%;
  background: green;
  padding: 15px 0;
}
section.one div {
  background: red;
  float: right;
}

section.two {
  float: left;
  width: 67%;
  background: orange;
  padding: 15px 0;
}
section.two div {
  background: red;
  float: left;
}

<header>
  <div>
  1
  </div>
</header>
<section class="one">
  <div>
    2
  </div>
</section>
<section class="two">
  <div>
    3
  </div>
</section>

Related - https://stackoverflow.com/questions/33564131/bootstrap-full-width-with-2-different-backgrounds-and-2-columns — Paulie_D, Nov 02 '18 at 19:08
and - https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen?lq=1 — Paulie_D, Nov 02 '18 at 19:08
one thing that's making this more complicated is the misuse of float. float is really good at making content flow around images--for example--but is just going to cause you pain if you're forcing it to give you alignment. — worc, Nov 02 '18 at 19:33

score 0 · Answer 1 · answered Nov 02 '18 at 19:44

I think this is what you're going for? It's setup with some nested flexbox definitions so that the outer containers stretch edge to edge, but the child elements stick to a max-width and share the available space.

header {
  background: blue;
  padding: 15px 0;
  display: flex;
  justify-content: center;
}

header div {
  flex: 0 0 500px;
  background: red;
}

.container {
  display: flex;
  justify-content: center;
  background-color: #ace;
}

.content {
  display: flex;
  flex-flow: row wrap;
  width: 500px;
}

section.one {
  flex: 0 0 33%;
  background: green;
  padding: 15px 0;
}

section.two {
  flex: 0 0 67%;
  background: orange;
  padding: 15px 0;
}

section.one div, section.two div {
  background: red;
}

<header>
  <div>
    1
  </div>
</header>
<div class="container">
  <div class="content">
    <section class="one">
      <div>
        2
      </div>
    </section>
    <section class="two">
      <div>
        3
      </div>
    </section>
  </div>
</div>

score 0 · Answer 2 · answered Nov 02 '18 at 20:09

If you're looking to extend the orange and green background colors to the edges of the desktop screen this should do it for your. This will also reorder your columns for mobile devices thanks to the use of a Bootstrap Grid

header {
  background: blue;
  padding: 15px 0;
}

.custom-container {
  background: linear-gradient(to right, green 0%,green 50%,orange 50%,orange 50%,orange 100%);
}

.section-1-container {
  background: red;
}

.row .section-2-container {
  background: green;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 0px;
  padding-right: 0px;
}

section.one div {
  background: red;
}

.row .section-3-container {
  background: orange;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 0px;
  padding-right: 0px;
}

section.two div {
  background: red;
}

header .row>div,
section>div {
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 section-1-container">
        1
      </div>
    </div>
  </div>
</header>
<div class="custom-container">
  <div class="container">
    <div class="row">
      <div class="col-sm-4 section-2-container">
        <section class="one">
          <div>
            2
          </div>
        </section>
      </div>
      <div class="col-sm-8 section-3-container">
        <section class="two">
          <div>
            3
          </div>
        </section>
      </div>
    </div>

Full width divs with max width content

2 Answers2