How to make a stable two column layout in html css


Layout: div-left is contained within the right-div / lineContainer

[right][left] … [/left] … [/right]
Hello there

Using the above scheme, we can make old-fashioned typewriter tab stops as shown here.

The Capital Cities of the UK

England - The capital is London.

Scotland - The capital is Edinburgh.

Wales - The capital is Cardiff.

Northern Ireland - The capital is Belfast.

The capital of the UK is - London.

Source- Project Britain, captitals.

Div in div

Div in container

Hello there


  body { outline: thin solid navy;}
  /* change x in * for debugging */
  x    { border: thick solid navy; padding: 2px; } 
  .lineContainer, .container > p {
    padding-left: 100px;
    margin: 0;
    line-height: 1.5;
  .left, em {
  	margin-left: -100px;
    display:inline-block; box-sizing: border-box; width: 100px;
	vertical-align: top;
  .div-in-div {
    display:inline-block; box-sizing: border-box; width: 100%;
	vertical-align: top;