CSS: Left / Right / Center Example, Please explain why this works

Question

What I wanted was a left and right column that auto sizes to its content, then a center column that takes the remaining space.

I've gotten a left, center, and right column layout using css and div's that works for me. However I don't understand why it works. The .left and .right classes make sense and work as planned. The .center class is confusing.

My Two Questions:

Why does "overflow:hidden" cause the center div to start at the right edge of the left div? More specifically, why does the left column area count as overflowed space towards the center column. And why does the right column area not count as overflowed space?
Why does "margin:0 auto" cause the center div's margin-right to equal the size of the right div? More importantly why doesn't margin-left behave the same with the left div?

Excuse me if I'm missing something obvious.

Working Code Example:

<html>
<head>
    <style>
    body, div{ margin:0;padding:0; }
    h1, h2, p{ margin:0 1em; padding:0; color:darkorange;}
    #header{
        height:2em;
        line-height:2em;
        overflow:hidden;
    }
    .left{
        float:left;
        background:#555;
    }
    .right{
        float:right;
        background:#777;
    }
    .center{
        overflow:hidden;
        margin:0 auto;
        background:#666;
    }
    </style>
</head>
<body>
<div id="header">
    <div class="left"><h1>Chapter Title</h1></div>  
    <div class="right"><p>Page Number</p></div>
    <div class="center"><h2>Page Title</h2></div>
</div>
</body>
</html>

score 3 · Accepted Answer · edited May 23 '17 at 12:30

This actually has nothing to do with overflow, since the left and right divs aren't children of the center div.

What overflow: hidden does is cause an element to establish a new block formatting context (BFC). Floats and non-floats interact in different ways depending on the formatting contexts in which they participate, which is why triggers such as this one are often used when dealing with floats. In this specific case, having the center div establish a BFC prevents floats from ever entering its content area. The section above on BFCs links to the later section on floats, which describes it in a little more detail:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.

If the center div did not establish a BFC of its own, then it would be laid out as if the floats were never there (after all, floating an element takes that element out of the flow). The text will still flow alongside the floats, but the content area of the center div will be as wide as the page itself, with the floats sitting on top of its content area. Note that the horizontal margins around the text only take apparent effect when the center div does establish a BFC.
Your center div has no set width, therefore any auto margins are zeroed out and the element stretches as wide as possible. The center div sits flush with the floats because the floats have no margins. The reason it can sit flush with the floats taking their exact widths into account is answered by the same quote given above.

If all this seems unintuitive to you, that's because overflow: hidden wasn't originally meant to have an effect of establishing a new formatting context. This side effect was added to CSS2.1 to address implementation limits. See this answer for an explanation.

Nice Explanation. I just added some additional text in each section. Results are awesome. Look at the fiddle http://jsfiddle.net/9hwre19u/. Can you please explain why this happen?? — Suresh Ponnukalai, Aug 26 '14 at 07:29
@Suresh Ponnukalai: There is not enough space for the right div to sit on the same line as the left div so it gets pushed down. Since the overflow is hidden on the container, this results in the right div completely disappearing (this is when the concept of *overflow* actually becomes relevant). — BoltClock, Aug 26 '14 at 07:32
Where the background and text went out?? Even I cant able to see the text using dev tools also. — Suresh Ponnukalai, Aug 26 '14 at 07:34
ohh ok. I forget the `overflow:hidden` settings. thanks BOSS. — Suresh Ponnukalai, Aug 26 '14 at 07:44

score 0 · Answer 2 · answered Aug 26 '14 at 07:07

Well, a margin is NOT inside your element (whatever element it is), it's out of it. Nor is your border if you add one.

So basically, left + center + right = 100% of your screen, but if you add margins/border to these elements, they add-up to MORE than 100% of screen size, so they have to overlap.

Check this (slightly modified) code:

<html>
<head>
    <style>
    body, div{ margin:0;padding:0; }
    h1, h2, p{ margin:0 1em; padding:0; color:darkorange;}
    #header{
        height:2em;
        line-height:2em;
    }
    .left{
        float:left;
        background:#555;
        border: 2px solid #FF00FF;
    }
    .right{
        float:right;
        background:#777;
        border: 2px solid #FF0000;
    }
    .center{
        background:#666;
        border: 2px solid #FFFF00;
    }
    </style>
</head>
<body>
<div id="header">
    <div class="left"><h1>Chapter Title</h1></div>  
    <div class="right"><p>Page Number</p></div>
    <div class="center"><h2>Page Title</h1></div>
</div>
</body>
</html>

I've put colored border. The central element's border is under left & right because they appear first in your file.

Overflow:hidden does nothing, as I have removed it from my code and it didn't change anything (there's no reason it should). You might have made otherchanges at the same time.

Same for your margin: 0 auto;, it doesn't really do anything.

CSS: Left / Right / Center Example, Please explain why this works

2 Answers2