Week 6:

Fluid Layout



Sizing your HTML elements using percentages is a good way to create fluid layouts that respond dynamically to the width of the browser viewport. Elements with percentage based sizes will always look towards their parent element to determine how big 100% is.

100%
33.33%
33.33%
33.33%
50%
50%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%



.full{
    width: 100%;
    padding: 100px 0 100px 0;
    background-color: white;
    color: black;
    text-align: center;
}

.half{
    width: 50%;
    padding: 100px 0 100px 0;
    text-align: center;
    float: left;
}

.third{
    width: 33.33%;
    padding: 100px 0 100px 0;
    text-align: center;
    float: left;
}

.quarter{
    width: 25%;
    padding: 100px 0 100px 0;
    float: left;
}



Resources