How can I use flexbox to achieve a floating sidebar layout with content that wraps around the sidebar?

Question

I'm trying to achieve a responsive layout that looks like this on desktop:

Desktop layout

And like this on mobile:

Mobile layout

Note the following requirements:

Sidebar should only take up as much space vertically as is necessary to fit the content. Below the sidebar, content from the main section should take up the full width.
On mobile, the sidebar should appear below the main content.

Here is a jsfiddle containing my initial HTML and CSS:

https://jsfiddle.net/sergkr/np6k2tj3/

and a snippet:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 0 2em;
  line-height: 1.4;
  color: #333;
  background-color: #fff
}

section {
  margin: 1.6em 0;
}

section>h2 {
  margin: 0;
  padding: 12px 24px;
  font-size: 16px;
  background: #eceeee;
  text-transform: uppercase;
}

section>p {
  margin: 0;
  padding: 12px 24px;
  background: #fafafa;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

main {
  flex-basis: 100%;
}

.sidebar {
  padding: 0 2em;
  background: #fbf6f4;
}

@media screen and (min-width: 1024px) {
  .container {
    flex-wrap: nowrap;
  }
  main {
    flex: 1 1 70%;
  }
  .sidebar {
    flex: 0 0 30%;
    margin-left: 2em;
  }
}

<div class="container">
  <main>
    <h1>Main</h1>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
      </p>
    </section>
  </main>
  <div class="sidebar">
    <h1>Sidebar</h1>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
      </p>
    </section>
  </div>
</div>

Note there is wasted space below the sidebar. I want the main content to wrap around and take up the full width after the sidebar ends, but I'm not sure how to achieve that.

I thought about using float: right on the sidebar and putting it before the <main>, but that results in the sidebar appearing first on mobile (I want it to appear after the content).

Is there a way to achieve the desired layout given the above requirements, either using flexbox, float, or some other technique?

G-Cyrillus · Accepted Answer

you can switch display and order with float. In order to use float you will need aside being first in HTML, so content can wrap around. flex and order will send it back to bottom on mobile.

Example or snippet below with HTML update to switch from a flex layout to a float layout

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 0 2em;
  line-height: 1.4rem;
  color: #ddd;
  background-color: #333
}

section {
  color:#333;
  margin: 1.6em 0;
}

section > h2 {
  margin: 0;
  padding: 12px 24px;
  font-size: 16px;
  background: #ace;
  text-transform: uppercase;
}

section > p {
  margin: 0;
  padding: 12px 24px;
  background: #fafafa;
}

.container {
overflow:hidden;
}

main {
  display:flex;
  flex-direction:column;
}

.sidebar {
  padding: 0 2em;
  background: tomato;
  order:2;
}

@media screen and (min-width: 1024px) {
  .container {
  }
  
  main {
    display:block;
  }
  main h1 {
    float:left;
    width:70%;
  }
  main section {
    clear:left;
    overflow:hidden;
  }
  
  .sidebar {
    width:25%;
    float:right;
    margin-left:2em;
  }
}

<div class="container">
  <main>
    <h1>Main</h1>
    <aside class="sidebar">
    <h1>Sidebar</h1>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
      </p>
    </section>
  </aside>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
      </p>
    </section>
  </main>
</div>

Asons · Answer

Updated

Thanks to G-Cyr, who put me in another direction, there is actually a Flexbox/Float combination, making the section flex column containers, which appear to respect the floated element and wrap around it.

All it takes is to add display: flex; flex-direction: column; to the section rule...and it even work with IE11 :)

Fiddle demo

Stack snippet

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 0 2em;
  line-height: 1.4;
  color: #333;
  background-color: #fff
}

section {
  display: flex;                       /* added  */
  flex-direction: column;              /* added  */
  margin: 1.6em 0;
}

section > h2 {
  margin: 0;
  padding: 12px 24px;
  font-size: 16px;
  background: #eceeee;
  text-transform: uppercase;
}

section > p {
  margin: 0;
  padding: 12px 24px;
  background: #fafafa;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

main {
  flex-basis: 100%;
}

.sidebar {
  order: 1;
  padding: 0 2em;
  background: #fbf6f4;
}

@media screen and (min-width: 1024px) {
  .container {
    display: block;
  }
  
  .sidebar {
    float: right;
    width: 30%;
    margin: 0 2em;
  }
}

<div class="container">
  <div class="sidebar">
    <h1>Sidebar</h1>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
      </p>
    </section>
  </div>
  <main>
    <h1>Main</h1>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
      </p>
    </section>
  </main>
</div>

And by putting the h2 and the p in a section of their own, also the p by itself will wrap around the floated element

Fiddle demo 2

Stack snippet 2

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 0 2em;
  line-height: 1.4;
  color: #333;
  background-color: #fff
}

section {
  display: flex;                       /*  added  */
  flex-direction: column;              /*  added  */
}
section:nth-child(2n+2) {              /*  added  */
  margin-top: 1.6em;
}

section > h2 {
  margin: 0;
  padding: 12px 24px;
  font-size: 16px;
  background: #eceeee;
  text-transform: uppercase;
}

section > p {
  margin: 0;
  padding: 12px 24px;
  background: #fafafa;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

main {
  flex-basis: 100%;
}

.sidebar {
  order: 1;
  padding: 0 2em;
  background: #fbf6f4;
}

@media screen and (min-width: 1024px) {
  .container {
    display: block;
  }
  
  .sidebar {
    float: right;
    width: 30%;
    margin: 0 2em;
  }
}

<div class="container">
  <div class="sidebar">
    <h1>Sidebar</h1>
    <section>
      <h2>Section</h2>
    </section>
    <section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      </p>
    </section>
    <section>
      <h2>Section</h2>
    </section>
    <section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum.
      </p>
    </section>
  </div>
  <main>
    <h1>Main</h1>
    <section>
      <h2>Section</h2>
    </section>
    <section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
      </p>
    </section>
    <section>
      <h2>Section</h2>
    </section>
    <section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
      </p>
    </section>
    <section>
      <h2>Section</h2>
    </section>
    <section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
      </p>
    </section>
    <section>
      <h2>Section</h2>
    </section>
    <section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
      </p>
    </section>
    <section>
      <h2>Section</h2>
    </section>
    <section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
      </p>
    </section>
    <section>
      <h2>Section</h2>
    </section>
    <section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
      </p>
    </section>
    <section>
      <h2>Section</h2>
    </section>
    <section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
      </p>
    </section>
    <section>
      <h2>Section</h2>
    </section>
    <section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
      </p>
    </section>
  </main>
</div>

~~Short answer is "No, that won't be possible using Flexbox".~~

inline elements ~~though~~, they will wrap around a floated element.

With ~~that~~ inline elements we can accomplish something that is similar, ~~which~~ it has some drawbacks though, where the difficult part is to have the background color fill the available space, so here is how it could look like w/o.

See the notes in the CSS

Fiddle demo

Stack snippet

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 0 2em;
  line-height: 1.4;
  color: #333;
  background-color: #fff
}

section {
  display: inline;                         /*  changed display type  */
  /*margin: 1.6em 0;*/                     /*  have no effect on inline element  */
}

section > h2 {
  display: inline;                         /*  changed display type  */
  /*margin: 0;*/                           /*  have no effect on inline element  */
  padding: 12px 24px;
  font-size: 16px;
  background: #eceeee;
  text-transform: uppercase;
}

section > p {
  display: inline;                         /*  changed display type  */
  /*margin: 0;*/                           /*  have no effect on inline element  */
  /*padding: 12px 24px;*/                  /*  won't work properly on
                                               multiline inline element  */
  /*background: #fafafa;*/                 /*  removed as it does not look good  */
}

section > p::before,
section > p::after {
  content:"\A\A";                          /*  create 2 line break's  */
  white-space: pre; /* or pre-wrap */
}

.container {
  display: flex;
  flex-wrap: wrap;
}

main {
  flex-basis: 100%;
}

.sidebar {
  order: 1;
  padding: 0 2em;
  background: #fbf6f4;
}

@media screen and (min-width: 1024px) {
  .container {
    display: block;
  }
  
  .sidebar {
    float: right;
    width: 30%;
    margin: 0 2em;
  }
}

<div class="container">
  <div class="sidebar">
    <h1>Sidebar</h1>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
      </p>
    </section>
  </div>
  <main>
    <h1>Main</h1>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
      </p>
    </section>
  </main>
</div>

How can I use flexbox to achieve a floating sidebar layout with content that wraps around the sidebar?

Tags:

html

css

flexbox

Sergey K

2 Answers

G-Cyrillus

Asons

Recent Activity

Donate For Us

How can I use flexbox to achieve a floating sidebar layout with content that wraps around the sidebar?

Tags:

html

css

flexbox

Sergey K

2 Answers

G-Cyrillus

Asons

Related questions

Recent Activity

Donate For Us