Content column

If you specify a percentage width navigation col, you must accept that at some text size, the text will spill out. Text grows at a quite unrelated quantity to pixels or browser width percentage. We will just assume that you choose a percentage and have text and pics that in practice will not spill out. The point of this exercise is to see how to make full length columns, or, what is the same in these matters, the appearance of full length columns.

The nav col to left is set at 20% width, the content col is given a margin of 20%. If we leave all backgrounds the same colour, we can achieve the full height look by a simple tactic of using a right border on the nav section, a left one on the right section. Now it does not matter which col has the greater height, there are two borders and they overlap giving the appearance of one border from top of the container to the bottom.

Both of the first two containers share the same CSS and differ in the HTML only in that the second one on the page has many more list items in the left column than in the first.

Content column

If you specify a percentage width navigation col, you must accept that at some text size, the text will spill out. Text grows at a quite unrelated quantity to pixels or browser width percentage. We will just assume that you choose a percentage and have text and pics that in practice will not spill out. The point of this exercise is to see how to make full length columns, or, what is the the same in these matters, the appearance of full length columns.

The nav col to left is set at 20% width, the content col is given a margin of 20%. If we leave all backgrounds the same colour, we can achieve the full height look by a simple tactic of using a right border on the nav section, a left one on the right section. Now it does not matter which col has the greater height, there are two borders and they overlap giving the appearance of one border from top of the container to the bottom.

Both containers with the thick black border on them share the same CSS and differ in the HTML only in that the lower one on the page has many more list items in the left columns making that column by far the longest in height.