CSS

Responsive 4 Column Layout

CSS snippet for a fluid responsive 4 column layout. 4 Column Layout with equal width content HTML CSS .col-four { width: 22%; float: left; margin-right: 4%; } .col-four:last-child { margin-right: 0; } .clear { clear: both; } Responsive CSS Tablet View @media screen and (max-width : 1024px) { .col-four { width: 50%; float: left; margin-right:… Read More

Responsive 3 Column Layout

CSS snippet for a fluid responsive 3 column layout. 1/3 + 1/3 + 1/3 1/2 + 1/4 + 1/4 1/4 + 1/2 + 1/4 1/4 + 1/4 + 1/2 1/3 + 1/3 + 1/3 responsive 3 column layout Three Column Layout with equal width content HTML CSS .col-one, .col-two, .col-three { width: 30%; float: left;… Read More

Responsive 2 Column Layout

CSS snippet for a fluid responsive 2 column layout. 1/2 + 1/2 responsive 2 column layout 2/3 + 1/3 responsive 2 column layout 1/3 + 2/3 responsive 2 column layout 3/4 + 1/4 responsive 2 column layout 1/4 + 3/4 responsive 2 column layout 1/2 + 1/2 Two Column Layout with equal width content HTML… Read More