Block Formatting Context

 
So I built a mock social media profile converting a Photoshop Design to a functional HTML5 & CSS3 webpage:

 

 

 

Social Network Profile

 

 

 

While working on the social network profile and positioning the elements, I wanted the submenu in the content area to overlay the top area with the profile and background photos.
The live page of the project I’m referring to can be seen here and you can check out the code on my GitHub repo.

So I added “overflow: visible” to the #content-area element, and realized that I had overwritten the previous “overflow: auto” value that I had already written like so:

 

 

#content-area {
background: #FAFAFA;

overflow: auto;

padding: 50px 0;
position: relative;
}
 
To:

#content-area {
background: #FAFAFA;

overflow: auto;

padding: 50px 0;
position: relative;

overflow: visible;

}

 

 

And while that alone wasn’t that important, the issue was that without the overflow: auto, the background color of the content area was no longer covering the whole background. Only where the content area had padding (width within the border-box). This is because the content area no longer had a Block Formatting Context. So now being that the side column and the main area are floated elements, they are Out of Flow elements, out of the flow of the layout. Therefore, the content area and its background only contain the content/padding, not the floated elements.

So I set out to find an alternative to how I could create a block formatting context for the content area. First I considered creating another container inside or outside the content area to contain the background color while the content area contains the content. But after thinking about it for a few moments it didn’t appear that would work.

Next I reviewed the different ways a block formatting context is created, trying to find if there’s a different CSS property that I could apply to the content area, that would achieve the same result. Here I stumbled upon the experimental “Display: Flow-Root” value. And more information on the overflow property.

 

 

According to the MDN docs:

“The problem with using overflow to create a new BFC [block formatting context] is that the overflow property is meant for telling the browser how you wish to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow for this purpose.

A newer value of display gives us the ability to create a new BFC without any other potentially problematic side-effects…The value name of flow-root makes sense when you understand you are creating something that acts like the root element (html) in terms of how it creates a new context for the flow layout inside it.”

 

 

So I removed the overflow: auto and added display: flow-root:

#content-area {
background: #FAFAFA;
overflow: auto;
padding: 50px 0;
position: relative;
overflow: visible;
}
 
To:

#content-area {
background: #FAFAFA;
padding: 50px 0;
position: relative;
overflow: visible;

display: flow-root;

}

 

 

And this did indeed work in making the background color cover the whole content area BUT, alas, the display: flow-root value is still experimental and still doesn’t have much browser compatibility.

So I had to try something different.

Then I thought maybe I should’ve added the background color to the root. Not so much the root but to the body to be precise. And I then removed display: flow-root and the background color from the #content-area, and added the background to the body:

 

 

body {

background: #FAFAFA;

}

#content-area {
padding: 50px 0;
position: relative;
overflow: visible;
}

 

 

I did not need to add overflow: auto to the body to replace the overflow: auto/display: flow-root I had on the #content-area element, because most browsers automatically give the body that capability. As per W3C Recommendation:

“UAs [User Agents] must apply the ‘overflow’ property set on the root element to the viewport. When the root element is an HTML “HTML” element or an XHTML “html” element, and that element has an HTML “BODY” element or an XHTML “body” element as a child, user agents must instead apply the ‘overflow’ property from the first such child element to the viewport, if the value on the root element is ‘visible’. The ‘visible’ value when used for the viewport must be interpreted as ‘auto’. The element from which the value is propagated must have a used value for ‘overflow’ of ‘visible’.”
Source: https://www.w3.org/TR/CSS2/visufx.html#propdef-overflow

 

 

So this is how it currently looks. Let me know your thoughts or any tips, tricks or another way you might’ve seen to do it. I’d love to hear your perspective.
 
Love & Peace,

Danielle