How can I divide the site into several sections using html css?-CodePudding

I want to make the site like the picture (https://i.stack.imgur.com/rFj7L.jpg)

and because Im new I cant. Can you help me?

CodePudding user response：

With CSS grid this is pretty easy to do!

https://www.w3schools.com/css/css_grid.asp

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'footer footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>



<div >
  <div >Header</div>
  <div >Menu</div>
  <div >Main</div>  
  <div >Right</div>
  <div >Footer</div>
</div>

</body>
</html>

CodePudding user response：

Use Bootstrap, it is an easy way to achieve your desired layout and many other layout options. It is free and very popular. It is used by professional developers, so you will also learn about industry level solutions. And great for beginners especially!