Div Vertical Align: Bottom

CSS Trick!

by Zuhaib Siddiqui

HTML

<div id="drawing">
            <div id="header">
                <p>Header text here</p>
            </div>
            <div id="container"><div class="site-section" id="main">
                    <p>Some main text here</p>
                    <p>More main text here</p>
                </div><div class="site-section" id="sidebar1">
                    <p>Some sidebar1 text here</p>
                    <p>More siderbar1 text here</p>
                </div><div class="site-section" id="sidebar2">
                    <p>Some sidebar2 text here</p>
                    <p>More siderbar2 text here</p>
                </div>
               
            </div>
            <div class="site-section" id="footer">
                <p>Footer text here</p>
            </div>
        </div>

CSS

*{
    margin:0;
    padding:0;
}

body{
    margin: 0px;
    padding: 0px;
    background-color: bisque;
}

#drawing{
    margin: 0px auto; 
    width: 90%;
    background-color: gray;
}
#header,#footer{
    width:100%;
    background-color:green;
    padding:10px;
    box-sizing:border-box;
}
.site-section{
    background-color: brown;
    display:inline-block;
    box-sizing:border-box;
    padding:10px;
}

p{
    margin: 0 0 30px 0;
    padding: 0px;
}

#container{
    text-align: justify;
}
#container:after{
    content:'';
    display:block;
    clear:both;
}
#main{
    width: 60%;}

#sidebar1,#sidebar2{
    width: 20%;}

#footer{
    /* Removing this comment is a way to "suppress" the space
    margin-top: -1em; */
    margin:0px
}