Konstruktors CSS Snippets

Column/Grid Layout Examples

These constructions demonstrate the possibilities of creating different column layouts with just 50 lines of CSS. The idea is simplicity.

If there is a need to style a specific section of a column block, you can always apply additional id or classname and style it appropriately.

Black lines at the bottom of the columns represent the width of their content. Therefore, it is easy to see the padding applied.

The smallest possible column width (1 unit)

This column

Simple 2 column layout (50% + 50%) without content divs

First column on the left side. The following classes are applied to this div:

  • bb-t15 — sets width 50%
  • bb-fa — floats to the left

Secon column on the right has exactely the same classes as the first column:

  • bb-t15 — sets width 50%
  • bb-fa — floats to the left

Notice that it has the same float (a means left) as the first one. You could change them places just by applying bb-fc (c means right) to the first block.

The same as above, but with swapped columns

Now this is the right column, although it comes first in the source:

  • bb-t15 — sets width 50%
  • bb-fc — floats to the right

But this is left column, although it comes second:

  • bb-t15 — sets width 50%
  • bb-fa — floats to the left

2 Columns (66.6% + 33.3%) with inner div for column content padding

This is left column, it comes second in the source:

First div for grid:

  • bb-t20 — sets width 66.6%
  • bb-fa — floats to the left

Inner div for content:

  • bbin-c2 — right padding (see letter c), padding width type 2

Now this is the right column, although it comes first in the source.

  • bb-t15 — sets width 33.3%
  • bb-fc — floats to the right

Inner div for content:

  • bbin-a2 — left padding (see letter a), padding width type 2

3 Columns (33% + 33% + 33%) with equal left and right padding for inner content

1st in source.

Grid div:

  • bb-t10 — 10 unit width out of 30
  • bb-fa — floats to the left

Inner div for content:

  • bbin-b2 — left and right (centred) padding (see letter b), padding width type 2

2nd in source.

Grid div:

  • bb-t10 — 10 unit width out of 30
  • bb-fa — floats to the left

Inner div for content:

  • bbin-b2 — left and right (centred) padding (see letter b), padding width type 2

3rd in source.

Grid div:

  • bb-t10 — 10 unit width out of 30
  • bb-fa — floats to the left

Inner div for content:

  • bbin-b2 — left and right (centred) padding (see letter b), padding width type 2

3 Columns width inner padding (left side), column order different from source

1st in source.

Grid div:

  • bb-t10 — 10 unit width out of 30
  • bb-fc — floats to the right

Inner div for content:

  • bbin-b2 — left and right (centred) padding (see letter b), padding width type 2

2nd in source.

Grid div:

  • bb-t10 — 10 unit width out of 30
  • bb-fa — floats to the left

Inner div for content:

  • bbin-b2 — left and right (centred) padding (see letter b), padding width type 2

3rd in source.

Grid div:

  • bb-t10 — 10 unit width out of 30
  • bb-fa — floats to the left

Inner div for content:

  • bbin-b2 — left and right (centred) padding (see letter b), padding width type 2

4 Columns width inner padding (right side), column order different from source

1st in source.

Grid div:

  • bb-t7a — 7.5 units (25%) out of 30
  • bb-fa — floats to the left

Inner div for content:

  • bbin-c2 — right padding (see letter c), padding width type 2

2nd in source.

Grid div:

  • bb-t7a — 7.5 units (25%) out of 30
  • bb-fc — floats to the right

Inner div for content:

  • bbin-c2 — right padding (see letter c), padding width type 2

3rd in source.

Grid div:

  • bb-t7a — 7.5 units (25%) out of 30
  • bb-fa — floats to the left

Inner div for content:

  • bbin-b2 — both left and right padding (see letter b), padding width type 2

4th in source.

Grid div:

  • bb-t7a — 7.5 units (25%) out of 30
  • bb-fc — floats to the right

Inner div for content:

  • bbin-c2 — right padding (see letter c), padding width type 2

3 Columns (6 units + 14 units + 10 units) with left side padding for inner content and left side borders

1st in source.

Grid div:

  • bb-t10 — 10 unit width out of 30
  • bb-fa — floats to the left

Inner div for content:

  • bbin-a2 — left padding (see letter a), padding width type 2

2nd in source.

Grid div:

  • bb-t14 — 14 unit width out of 30
  • bb-fa — floats to the left

Inner div for content:

  • bbin-a2 — left padding (see letter a), padding width type 2

3rd in source.

Grid div:

  • bb-t6 — 6 unit width out of 30
  • bb-fa — floats to the left

Inner div for content:

  • bbin-a2 — left padding (see letter a), padding width type 2