Understanding CSS Layouting. Lesson I

by mgoetzke

HTML

SOME LEADING CONTENT
<div class="horizontally-filled-list">
    <div class="design" style="float:left">
        <div class="template">
            <div class="first">
                <div class="centerpoint">
                    <div>Some overflowing text</div>
                </div>
            </div>
        </div>
    </div>
    <div class="design" style="float:left">
        <div class="template">
            <div class="second"> <span>HEADER</span>

            </div>
        </div>
    </div>
    <div class="design" style="float:right">
        <div class="template">
            <div class="third"> <span>More Text</span>

            </div>
        </div>
    </div>
    <div style='clear:both'></div>
</div>
<div class="horizontally-filled-list">
    <div class="design" style="float:left">
        <div class="template">
            <div class="first">
                <div class="centerpoint">
                    <div>Some overflowing text</div>
                </div>
            </div>
        </div>
    </div>
    <div class="design" style="float:left">
        <div class="template">
            <div class="second"> <span>HEADER</span>

            </div>
        </div>
    </div>
    <div class="design" style="float:right">
        <div class="template">
            <div class="third"> <span>More Text</span>

            </div>
        </div>
    </div>
    <div style='clear:both'></div>
</div>
NEW CONTENT AT BOTTOM

CSS

.horizontally-filled-list {
    display: block;
    border: 1px grey solid;
    background: rgba(0, 0, 0, 0.05);
}

.design {
    display: block;
}

.template {
    width: auto;
    height: auto;
    display: block;
}

.first {
    width: 128px;
    height: 128px;
    display: block;
    position: relative;/* for centering inner content */
    background-color: lightblue;
}

.second {
    background: red;
    color:white;
    display: block;
}
.third {
    background: lightgreen;
}


.centerpoint {
    position: absolute;
    left: 50%;
    top: 50%;
}
.centerpoint>div {
    text-align:center;
    transform:translateX(-50%) translateY(-50%);
}

JavaScript

/*
    This is a test fiddle to understand how display/position/float works together.
    
    
    The following seems to be the outcome:
    
    1) inline or inline-block SHOULD only be used in the context of Text. They work based on  a line based positioning model. inline-block is the same as inline BUT respects width and height. 
    
    2) therefore divs should by default be set to block (which is their default anyway). putting inline-block divs inside an inline-block area WILL cause vertical white-space to appear since its is text line based and text has a baseline and some vertical pixels UNDERNEATH the characters (j for example) therefore the inline-block elements will be positioned such that they start from the text baseline upwards. (test by adding inline block to .horizontally-filled-list and .template above)
    
    3) display: block implies that elements will be rendered vertically underneath each other
    
    4) when someone would rather have divs horizontally aligned DONT use inline or inline-block unless the content inside the div actually IS text. use float instead. When the last element in such a horizontal list should take up the remaining width dont float it or float it right to right align.
    
    AFTER all the horizontal elements insert a div with style clear:both to UN-float all the following content. Otherwise the next content will flow into the same container. (test by removing the div with style clear:both above)
    
    5) "position: absolute" removes the content area from the layouting around it.
    
    6) "position: relative" can move it, but is mostly useful to allow absolute children within its borders
    
    7) "centering text/images etc vertically AND horizontally, means centering a container inside a container". So a) Create a container of appropriate size (see .first), then b) set a container inside the exact middle (.centerpoint) then c) text-align to center if text AND transform to -50% x and y to center on the...