SharePoint Online cannot expand web part zone width - sharepoint-2013

Question

I have a blog subsite on a SharePoint Online (2013) site that by default has 3 web part zones: BlogNavigator, Left and Right (ordered from left to right).
The layout of the zones is frustrating, because the Left zone, which houses the actual content for the site, is relatively narrow considering the amount of available space to the right of the Right zone.
When I move all the Web Parts from the Right zone into BlogNavigator, the Left zone maintains its size, even though there is room to expand rightward.
I have tried manually declaring the Left zone ContainerWidth on the page file in SP Designer, I have tried applying a CSS file to the page to set the width, but nothing seems to work.
I have even removed all references to the Right zone on the page file, removing it completely, but the Left zone still remains its original width.
Is there some way I can alter this zone?

Answer 1

The out-of-the-box SharePoint page layouts use a peculiar grid framework to layout the different webpart zones.
This framework, which is defined in the layout css, uses display: table and display: table-cell to position the zones in the horizontal layout.
Table layouts usually result in odd sizing issues similar to how you have described.
In a project that I have worked on recently, I needed to fix the table layout to be more rigid so that there were no sizing issues. The site I was working on was a Publishing site so I am not sure if the classes are the same on you blog but here is the CSS I used to tweak the grid framework.
#DeltaPlaceHolderMain .ms-table {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
width: auto; }
#DeltaPlaceHolderMain .ms-table > div[class*="tableCol"] {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box; }
#DeltaPlaceHolderMain .tableCol-75,
#DeltaPlaceHolderMain .tableCol-33,
#DeltaPlaceHolderMain .tableCol-25,
#DeltaPlaceHolderMain .tableCol-50 {
width: 100%;
display: block;
min-width: 0; }
#contentBox {
padding-left: 15px;
padding-right: 15px; }
#titleAreaRow {
display: table; }
#contentRow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
#sideNavBox {
margin-right: 5px; }
#contentBox {
min-width: 0;
margin: 0;
-webkit-box-flex: 1;
-ms-flex: 1 0;
flex: 1 0; }
#s4-titlerow,
#contentRow {
max-width: 1450px;
margin: 0 auto; }
#media screen and (min-width: 1020px) {
#DeltaPlaceHolderMain .tableCol-75 {
width: 66.666%; }
#DeltaPlaceHolderMain .tableCol-33 {
width: 33.333%;
}
#DeltaPlaceHolderMain .tableCol-25 {
width: 33.333%; }
#DeltaPlaceHolderMain .tableCol-50 {
width: 50%; } }
#media screen and (min-width: 1340px) {
#DeltaPlaceHolderMain .tableCol-75 {
width: 75%; }
#DeltaPlaceHolderMain .tableCol-25 {
width: 25%; } }
* {
outline: none; }
html {
-webkit-text-size-adjust: 100%; }
/* Sidenav */
#sideNavBox {
min-width: 180px;
max-width: 300px;
width: auto; }