Layout: With CSS

CSS Style with ID attributes: HTML file: Displayed by browser:
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style> 		<body>
  <div id="header">
    <h1>City Gallery</h1>
  </div>
  <div id="nav">
    London
    Paris
    Tokyo
  </div>
  <div id="section">
    <h2>London</h2>
<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 id="footer">
    Copyright © W3Schools.com
  </div>
</body>

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.

Columns are looking very nice now! Oh, the possibilites!! This could be a lot of fun, lots of sticky notes because figuring out this CSS styling is not that easy. But hey, there's always the easy way out: just view the source and just copy the code of any design that appeals to you!

Back button Table of Contents Next button