Search code examples
htmlcssdimensionsdisplay

Why are the child blocks behaving differently to their parents, in relation to their parents' siblings?

I have an HTML structure like this:

    0.body
       ->>1.background
          ->>2.leftwing
          ->>2.rightwing
          ->>2.content block
             ->>3.top-content block
                ->>4.contacts block
            ->>4.title block
                ->>4.edited block

leftwing, rightwing and content block are siblings. contacts, title and edited are siblings.

This is my HTML:

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="bckdrp all">
        <div class="lftfd  all">
        </div>
        <div class="rtfd  all">
        </div>
        <div class="bigbox all">
            <div class="topbox all">
                <div class="lftcnt inlblk all">
                    contact
                </div>
                <div class="midcnt inlblk all">
                    title
                </div>
                <div class="rtcnt inlblk all">
                    edited
                </div>
            </div>
            <div class="topnav all">
                <div class="toppnt all">
                    up
                </div>
            </div>
            <div class="midbox all">
                <div class="lftspc inlblk all">
                </div>
                <div class="midspc inlblk all">
                    <div class="super all">
                        LONG
                        <!--ENLONGATED-->
                    </div>
                </div>
                <div class="rtspc inlblk all">
                    <div class="navpad all">
                        <!--1--><div class="navcir all">1</div>
                        <!--2--><div class="navcir all">2</div>
                        <!--3--><div class="navcir all">3</div>
                        <!--4--><div class="navcir all">4</div>
                        <!--5--><div class="navcir all">5</div>
                        <!--6--><div class="navcir all">6</div>
                    </div>
                </div>
            </div>
            <div class="botnav all">
                <div class="botpnt all">
                    down
                </div>
            </div>
            <div class="botbox all">
                <div class="foot all">
                    <div class="acc all">
                        login
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

This is my CSS:

.bckdrp
{
    background: url("img/bckdrp.jpg") center center no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

.lftfd
{
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.0));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.0));
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.0));
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.0));
    float: left;
    height: 100%;
    width: 30%;
}

.rtfd
{
    background: linear-gradient(to right, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
    float: right;
    height: 100%;
    width: 30%;
}




.inlblk
{
    display: inline-block;
}


.bigbox
{
    background-color: blue;
}

.topbox
{
    background-color: yellow;
}

.all
{
    border: 1px solid rgba(255, 0, 0, 0.5);
}

This is the result:

enter image description here

Why is the position and dimensions of the content and top-content blocks (shown in blue and yellow) NOT affected by the left and right wings, but the position and dimensions of the children of the top-content block (contacts, title and edited) is?

Changing the children's display to "block" does not fix this matter. And besides background-colour and display: inline-block there is no difference between the top-content block and it's children.

Solution

  • Either the children, if they're display:inline-block, or their text content if the children are display:block, will avoid the floats, because the line boxes that they are in will not overlap the floats.

    The blue and yellow boxes though are block boxes, i.e. they are not in a line box. Block boxes, unless they establish a block formatting context, are oblivious to the presence of floats and therefore stretch fully across the page.