akaBot Center

Version 39.2 by Nhan Nguyen on 2022/04/20 13:42

 

  • { box-sizing: border-box; }
/* Create three equal columns that floats next to each other */ .column { float: left; width: 33.33%; padding: 10px; height: 300px; /* Should be removed. Only for demonstration */ }/* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; }/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { width: 100%; } }

Responsive Three Column Layout

Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).

Column 1

Some text..

Column 2

Some text..

Column 3

Some text..

Created by admin on 2022/04/18 04:09