I was looking for a search, but did not find a clear explanation, what kind of column layouts?

3, 7, 12 column ...

Explain more in detail, please.

    4 answers 4

    Did you mean using a grid like "960 Grid"? This and similar systems allow you to quickly create a layout based on the grid. This result is achieved with the help of cross width browser presets of the width of the page where you put your code. Learn more here - http://ruseller.com/lessons.php?rub=2&id=926

      Well, here is an example of the simplest grid:

      3 columns: http://jsfiddle.net/IonDen/bmta05rd/

      5 columns: http://jsfiddle.net/IonDen/bmta05rd/1/

      7 columns: http://jsfiddle.net/IonDen/bmta05rd/2/

      .group { position: relative; overflow: hidden; height: 100%; background: #eee; } .col { float: left; box-sizing: border-box; background: #ccc; height: 100%; } .col + .col { border-left: 1px solid #000; } .size_3 .col { width: 33.33%; } .size_5 .col { width: 20%; } .size_7 .col { width: 14.28%; }

      And then to your taste. Of course, to create columns it is best to use a ready-made grid (for example, from Bootstrap)

        You should read about Twitter Bootstrap technology, which allows you to create a rather complex design structure using ordinary div and special classes.

          A column layout is the use of columns for positioning elements. If there are 12 columns, it means that the width of the screen (block) is conditionally divided into 12 equal parts and you can arrange your elements in each of these cells, as well as in several at once (merge), i.e. indents, the width of the blocks will be a multiple of the width of 1 cell. The simplest markup can be done for training yourself, but for use, as Dmitry wrote earlier, I recommend “Bootstrap”. This is a fairly convenient framework for html, allowing you to make beautiful adaptive pages and interfaces.