FileNav

online
online: /HTML & CSS/CSS_Layout.md

CSS Layout

box-sizing

/* Like IE 6 in Quirks Mode. web supported */
.border-box{
    -webkit-box-sizing: border-box;/* Android 2.1+, BB 7, Chrome 4+, iOS Safari 3.2+, Safari 3.1+, etc. */
    -moz-box-sizing: border-box;/* FF and FF for Android */
    box-sizing: border-box;/* Android 4+, BB 10+, Chrome 10+, IE 8+, IE Mobile 9+, iOS Safari 5+, Opera 8.5+, Safari 5.1+ */
}

/* browser default */
.content-box{
    -webkit-box-sizing: content-box;/* Android 2.1+, BB 7, Chrome 4+, iOS Safari 3.2+, Safari 3.1+, etc. */
    -moz-box-sizing: content-box;/* FF+ and FF+ for Android */
    box-sizing: content-box;/* Android 4+, BB 10+, Chrome 10+, IE 8+, IE Mobile 9+, iOS Safari 5+, Opera 8.5+, Safari 5.1+ */
}

/* not yet well supported */
.padding-box{
    -webkit-box-sizing: padding-box;/* No support */
    -moz-box-sizing: padding-box;/* FF 2+ and FF for Android 25+ */
    box-sizing: padding-box;/* No support */
}


/* apply a natural box layout model to all elements */
*, *:before, *:after{
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.ie6 *, .ie6 *:before, .ie6 *:after,
.ie7 *, .ie7 *:before, .ie7 *:after{
    behavior: url(/scripts/boxsizing.htc);
}
/* Apache MIME-Type
AddType text/x-component .htc
*/

Dimensions

height

width

display

Display inline-block

<style>
    .box{
        /* FF2 fix */
    /*  display:-moz-inline-stack;*/
        display:-moz-inline-box;

        display:inline-block;/* For other browsers that support it and triggers hasLayout needed bellow for IE 7 or less */
        height:300px;
        width:200px;
    }
</style>
<!--[if lt IE 8]>
<style>
    .box{
        zoom:1;/* Might be needed to force hasLayout. Though not likely. */
        display:inline;/* With hasLayout triggered will behave mostly as inline-block */
        vertical-align:top;
    }
</style>
<![endif]-->

position

absolute | relative

top | bottom / left | right

static

float

CSS Figures

CSS Columns

.four-column {
    -webkit-column-count: 4;
    -webkit-column-gap: 1em;
    -webkit-column-rule: 2px solid #33C;
    -webkit-column-break-before: page;
    column-count: 4;
    column-gap: 1em;
    column-rule: 2px solid #33C;
    break-before: page;
}

Grid

Tables

Table Columns

W3C specified column declarations: border, background, width and visibility

StackOverflow: Table Column Formatting

    <style type="text/css">
        #mytable tr > td:first-child { color: red;} /* first column */
        #mytable tr > td:first-child + td { color: green;} /* second column */
        #mytable tr > td:first-child + td + td { color: blue;} /* third column */
    </style>
</head>
<body> 
    <table id="mytable">
        <tr>
            <td>text 1</td>
            <td>text 2</td>
            <td>text 3</td>
        </tr>
        <tr>
            <td>text 4</td>
            <td>text 5</td>
            <td>text 6</td>
        </tr>
    </table>

StackOverflow: How is a CSS “display: table-column” supposed to work?

Sticky Footers