CSS Website Layout

CSS Website Layout

A website is often divided into headers, menus, content, and a footer.

Common Layout Elements

• Header: Usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name.
• Navigation Bar: A list of links to help visitors navigate through your website.
• Sidebar: Contains information that is not the main content (like ads, links, etc).
• Content: The main content of the page.
• Footer: Placed at the bottom of the page. Often contains copyright information, contact info, etc.

Example Layout

Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

• CSS Frameworks (like Bootstrap)
• CSS Floats (Old technique)
• CSS Flexbox (Modern technique)
• CSS Grid (Modern technique)

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}