Layout: Using <div>

Websites often display content in multiple columns (like a magazine or newspaper). The <div> element is often used as a layout tool, because it can easily be positioned with CSS, as shown on the next page. On this page, we use 4 <div> elements to create a multiple column layout:

HTML file:	Displayed by browser:
<body> <div> <h1>City Gallery</h1> </div> <div> London<br /> Paris<br /> Tokyo<br /> </div> <div> <h1>London</h1> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </div> <div> Copyright © W3Schools.com </div> </body>	City Gallery London Paris Tokyo London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. Copyright © W3Schools.com

HTML file:

Displayed by browser:

<body>
  <div>
    <h1>City Gallery</h1>
  </div>
  <div>
    London<br />
    Paris<br />
    Tokyo<br />
  </div>
  <div>
    <h1>London</h1>
    <p>
    London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
    </p>
    <p>
    Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
    </p>
  </div>
  <div>
    Copyright © W3Schools.com
  </div>
</body>

City Gallery

London
Paris
Tokyo

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

It doesn't look like it has multiple columns, does it? That's where the CSS comes in handy!