[Theme: Twenty Eleven]

First of all, you should not be modifying the theme’s files directly. If the theme ever gets updated (because of security patches, feature enhancements, or bug fixes), your changes will be lost. The suggested method of making changes to a theme are either through plugins, or by creating a child theme. If you are just making changes to the CSS, then I like the Custom CSS Manager plugin. With an older theme like Twenty Eleven, you might not think that it wouldn’t get updated anymore, but the latest update was this past April, so there’s still a good chance that the theme will be updated again.

You might want to consider using a Flexbox model instead of floats, it will make moving the sidebar around much easier. You can read more about the Flexbox model here and here. Try adding this CSS, either in a child theme style.css file, or through a plugin:

/* This rule moves the list bullets inside the sidebar */
div#secondary ul {
   list-style-position: inside;
}

/* Set up flex box */
#main {
   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   display: -moz-box;      /* OLD: Firefox (buggy) */
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
   display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
}

.left-sidebar #secondary {
   box-sizing: border-box;  /* Makes it easier to adjust width */
   width: 287px;            /* width from old site */
   padding: 20px;
   margin: 0;
}

/* Change the order of the elements in the #main container so the sidebar comes first */
.left-sidebar #secondary {
   -prefix-box-ordinal-group: 1; /* old spec; must be positive */
   -ms-flex-order: 1; /* IE 10 syntax */
   order: 1; /* new syntax */
}

.left-sidebar #primary {
   -prefix-box-ordinal-group: 2; /* old spec; must be positive */
   -ms-flex-order: 2; /* IE 10 syntax */
   order: 2; /* new syntax */

   /* Set the width to fit the rest of the container */
   -prefix-box-flex: 1; /* old spec webkit, moz */
   flex: 1;
}

/* Set a media query that changes the flow of the elements in a column
instead of a row, and change the order of the sidebar so it
will come after the main content on smaller screen widths */
@media (max-width: 800px) {

   /* Make elements flow in a column */
   #main {
      flex-direction: column;
   }

   /* Change order of sidebar so it follows main content */
   .left-sidebar #secondary {
      -prefix-box-ordinal-group: 3; /* old spec; must be positive */
      -ms-flex-order: 3; /* IE 10 syntax */
      order: 3; /* new syntax */
   }

   .left-sidebar #primary,
   #main #secondary {
      margin:0;
   }
}

The above rules sets the sidebar to the width from the original site, so it lines up better with the gold bar in the header. The flexbox model will expand the sidebar to fill in the height, and set the width of the main content to fill in the rest of the container space. Hopefully there are enough comments in the CSS that you can understand what is happening.

Oops, I left out additional browser-specific properties for box sizing. The above rule for .left-sidebar #secondary should be this instead:

.left-sidebar #secondary {
   box-sizing: border-box;  /* Makes it easier to adjust width */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   o-box-sizing: border-box;
   width: 287px;            /* width from old site */
   padding: 20px;
   margin: 0;
}

Hi CrouchingBruin,

It works absolutely brilliant, just what I meant! Thank you so much for this.

Is there anything possible for creating this at the right side as well? So it lines with the light brown part at the right and so I could give this a background as well?

Thanks you so much!

Kind regards,

Luc

Try adding this to the end of your custom CSS:

/* Set background color of main container to same brown color as right bar in header */
#main {
  background-color: #f6efe5;
}

.left-sidebar #primary {
   /* Reset the padding & margin to something easier to work with */
   box-sizing: border-box;
   padding: 0 50px;
   margin: 0;
   /* Set background to white */
   background-color: #fff;
   /* Have to turn off flex sizing for now, because we
   want a fixed width */
   -prefix-box-flex: none; /* old spec webkit, moz */
   flex: none;
   /* set the width to be a fixed size:
   1000px max page size - 287 for the left sidebar - 63 for the bar = 650px */
   width: 650px;
}

/* Reset margin & padding for #content. Padding for text was set above in rule for #primary instead */
.left-sidebar #content {
  margin: 0;
  padding: 0;
  width: auto;
}
/* Hide right sidebar on screen widths narrower than 1024px by making
the width of the primary area fit the entire width of the container */
@media (max-width: 1024px) {
  .left-sidebar #primary {
    width: auto;
   -prefix-box-flex: 1; /* old spec webkit, moz */
   flex: 1;
  }
}