Creating Columns

Mastering the art of creating responsive columns on a web pages is one of the biggest challenges you'll encounter.

📝Keep your calculator handy, learn to diagram them on a piece of sketch paper and you'll speed up the learning process.

How Precise

I once asked a SE how precise relative values could be when creating columns on a web page. YES!! It was a FOOL's ERRAND.

To answer the question I'll provide the actual CSS used to create the 4 columns on the front page of Template #506.

The combined widths of nested divisions or all adjacent divisions must not exceed 100% of available space.

If you add padding or margins, you must subtract their values from the width of that division or from the width of an adjacent division.

Beginners will run into problems getting adjacent divisions to line up side by side.

If you can master this concept, you can master the art of building web pages.

Everything you add to a division, margins, padding and even box-shadow and borders, adds to its size.

Oh, and I guess you could say 20.875% and 2.166% is pretty precise.

The Math: 20.875 X 4 + 5 +5 + 2.166 X 3 = 99.998

 

Examples

CSS 4 Columns on front page:

div.left {
width: 20.875%;
padding: 0 0 ;
margin: 0 2.166% 0 5%;
float: left;
 }

div.inner-left {
width: 20.875%;
padding: 0 0 ;
margin: 0 0;
float: left;
}

div.inner-right {
width: 20.875%;
padding: 0 0;
margin: 0 2.166% 0 2.166%;
float: left;
}

div.right {
width: 20.875%;
padding: 0 0;
margin: 0 5% 0 0;
float: left;
}

Margins are defined as:
margin : top right bottom left

TIP Both margins and padding are defined starting at the top of the division (or any block element) and running clockwise around it.