CSS Layout

There are 2 approaches to layout we are going to focus on.

1. Inline Block Method
2. Float Method

Inline Block Method

.column-1, .column-2, .column-3 {
    display: inline-block;
    vertical-align: top;
}

.column-1 {
    width: 40%;
    margin-right: calc(20px -4px);
}

.column-2 {
    width: calc(30% - 20px);
    margin-right: calc(20px -4px);

}

.column-3 {
    width: calc(30% - 20px);
    margin-right: 4px;
}

Float Method

.column-1, .column-2, .column-3 {
    float: left
}

.column-1 {
    width: 40%;
    margin-right: 20px;
}

.column-2 {
    width: calc(30% - 20px);
    margin-right: 20px;

}

.column-3 {
    width: calc(30% - 20px);
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}