Clever Geek Handbook

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

What I wanted was the left and right columns, which automatically detect its content, and then the center column, which takes up the remaining space.

I got left, center and right columns using css and div which works for me. However, I don't understand why it works. The .left and .right classes make sense and work as intended. The .center class is confusing.

My two questions are:

  • Why does "overflow: hidden" cause the center of the div to start at the right edge of the left div? More specifically, why the area of ​​the left column is considered overflowing with respect to the center column. And why isn't the right-hand area of ​​a column considered overflowing?

  • Why does "margin: 0 auto" cause the div-right's center margin to equal the size of the right div? More importantly, why doesn't the left-hand marker behave the same with the left-hand div?

Sorry if I miss 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>
+3


source to share


2 answers


  • This actually has nothing to do with overflow since the left and right divs are not children of the center div.

    What it overflow: hidden

    does is call the element to create a new block formatting context (BFC). Floats and non-floating elements interact differently depending on the formatting contexts in which they participate, which is why triggers such as this are often used when working with floats. In this particular case, when the center of the div is set to BFC, it prevents floats from entering its content area. The section above on BFCs refers to a later section on floats, which describes it in a little more detail :

    Table border fields of a block-level overridden element or element in normal flow that sets a new block formatting (for example, an "overflow" element other than "visible") must not overlap the field field of any floats in the same block formatting context. as the element itself.

    If the center of the div hasn't set its own BFC, it will be laid out as if the floats weren't there (after all, the floating element will take that element out of the flow). The text will still flow next to the floats, but the center div's content area 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 seem obvious when the center div is set to BFC.

  • Your center div doesn't have a given width, so 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 floats given their exact width is answered by the same quote above.



If all of this sounds unintuitive to you, it's because it overflow: hidden

wasn't originally intended to create a new formatting context. This side effect was added in CSS2.1 to address implementation constraints. See this answer for an explanation.

+3


source


Well, the margin is NOT inside your element (whatever element it is), it is from it. Also, your border is not added if you add one.

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

Check out 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 have placed a colored frame. The center border of the element is on the left and right, because they appear first in your file.

Overflow: hidden does nothing as I removed it from my code and changed nothing (no reason it should). You may have made other changes at the same time.

It's the same for your field: 0 auto;, it doesn't actually do anything.

0


source






More articles:


All Articles